I am looking for a way to use a text shadow on the h2 tag, and also have an underline on the words. The problem is, the text shadow is on the underline as well. How do I make it so that the underline doesnt have the text shadow?
*
css:
.pagetitle {
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-decoration: underline;
text-decoration-color: grey;
}
*
You'll need to separate the underline from the text. To do so you can generate the underline with background with linear-gradient or a pseudo-element (::before).
.pagetitle {
display: inline-block;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
background: linear-gradient(transparent calc(100% - 2px), grey calc(100% - 2px));
}<h2 class="pagetitle">I'm the Page Title</h2>
you can try to use the border, resetting line-height to bring it closer to text.
.pagetitle {
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-decoration-color: grey;
color:green;
border-bottom:solid;
line-height:0.9em;
width:max-content;/* use display:table; if max-content is not supported */
}
h1 + h1 { margin:auto;}/*possibly*/<h1 class="pagetitle">My page title underlined</h1>
<h1 class="pagetitle">My page title underlined & centered</h1>A pseudo could also be used.
If you also wanted the underline to be cut off when letters go through it, then , here is a probable duplicate : Disable underline for lowercase characters: g q p j y?
You cannot control the underline shadow independently, but what you could do is use a border-bottom or one of the other tricks described in this article:
