Chapter Text
Welcome to this guide, fellow Ao3 users!
Let's start with applying the pseudo elements to your work through a workskin and HTML.
Keep in mind, though, that you can't use this code to make the first letter in gradient colors: if you try to do it, all you will get is a first letter with a colored shadow in one of the colors from the gradient.
If you want to apply the first-letter code only to the chapter text itself, it’s important to add the part #chapters after the #workskin part: this way, only the first letters inside the chapter will be affected. If you don’t add the #chapters part, every first letter of a paragraph will be affected, included those in the summary and notes.
This code will give a certain style to the first letter of every paragraph in the chapter, for example I’m going to give the letters a black-and-red background and make it in color white #ffffff and in Lucida Calligraphy font, so that they will resemble the decorated letters in ancient books:
#workskin #chapters p::first-letter {
font-weight: bold;
color: #ffffff;
font-family: Lucida Calligraphy, cursive;
font-size: 34px;
background: url('https://img.freepik.com/vettori-gratuito/damask-modello-seamless_1217-1889.jpg');
background-size: 100% 100%;
padding: 6px 10px 6px 6px;
border: 1px solid #000000;
}
You can see the result in this chapter. This will work without the need to use any code in HTML.
You can also choose to give a different style to the first letter of the first paragraph after a line divider, for example if you write the code like this:
#workskin #chapters hr + p::first-letter {
font-weight: bold;
color: #ffff00;
}
And then you add a line divider like this:
You will get a bright yellow first letter right after the line divider, as you can see here.
This code also works without the need to add a specific command in HTML, except of course for adding the line divider. But, as you can see, the letter still has the background of the first letter from the main code: this is because the main code has priority over this code.
Unfortunately, as I found out through many experiments, the first letter/first line after the line divider can only be on solid color: I tried making it in gradient colors and it does not work, so I'm sorry to say that, to have gradient text after a line divider, you need to create a specific code for the line divider and a code for the gradient text, then use the <span class="???"> command in HTML on the first letter/first line after the line divider. You can see an example on how to do this in chapter 4 of this guide. For more information about gradient text, see my guide here.
If you want to apply the first letter style only to a specific paragraph, then you can write the code like this (the name “lettera” is just a random name, you can give it whatever name you want). In this example, I'm giving the text a green shadow to give it a neon effect. For more info about neon text and the how to use the text-shadow code, you can check my guide here.
#workskin .lettera::first-letter {
color: #ffffff;
font-size: 20px;
text-shadow: 0 0 3px #006400, 0 0 5px #00FF00, 0 0 7px #00FF00, 0 0 9px #00FF00, 0 0 11px #00FF00, 0 0 13px #00FF00, 0 0 15px #00FF00, 0 0 17px #00ff00, 0 0 19px #00ff00, 0 0 21px #00FF00, 0 0 23px #00ff00;
font-weight: bold;
font-family: Arial, sans-serif;
background: #ffffff;
}
And then you apply it to the paragraph of your choice like this in HTML:
<p class="lettera">This is the chosen paragraph with the customized capital letter</p>
And this is the result:
This is the chosen paragraph with the customized capital letter.
But if you already added the code that applies to the whole chapter (the code #workskin #chapters p::first-letter), the style in the code for the specific paragraph (#workskin .lettera::first-letter) will not show up and instead you will get the style of the main code. So it would be better to just go with the code #workskin .????::first-letter and make one with a different name for each style you want to use, but that’s up to you.
Next chapter contains the explanation on how to use the ::first-line pseudo element in the chapter text.