Issue
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
p:before {
content:"Former - ";
color:red;
font-family:"Tahoma" ,Times New Roman;
font-size:70%;
}
p.normal:first-letter {
font-size:40px;
color:blue;
}
</style>
</head>
<body>
<p class="normal">First character of this paragraph will
be normal and will have font size 40px;</p>
</body>
</html>
Here, the content in the :before pseudo-element is displaying in red, but I also want to style the character "F" of "First character of this paragraph" in blue. But instead, I see the "F" of "Former - " in blue.
What I want is to apply both :before and first letter of .normal after the :before content to the same paragraph. Is this possible? If so, how?
Solution
In case you can not edit the HTML without JavaScript for example, you can use pure CSS so long as you are styling the :before or :after content of a "block-level" element.
p:before {
content: 'Wisdom'
}
p:first-letter {
font-size: 7vw;
}<p></p>Please note: The ::first-letter CSS pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).
Attribution: https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
Answered By - Sean Sr
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.