CSS: text-decoration unable to remove overline

Question

I am trying to remove text-decoration from the first letter using the p::first-letter selector. But for some unknown reason i am unable to do that.

p::first-line {
  font-weight: bold;
  text-decoration: overline;
}
p::first-letter {
  text-decoration: none;
  /*text-decoration-color: rgba(59, 119, 191, 0.68);*/
  display: block;
  color: red;
  font-weight: bold;
  background-color: rgba(59, 119, 191, 0.68);
  margin: 0px 2px 1px 0;
  padding: 5px 13px 5px 11px;
  color: #b1ffea;
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae!
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

Update:

Okay, I got it working by Chrome by enabling "Experimental Web Platform features". For some reason prefix -webkit- wasn't able to trigger this behavior. Here is the working code.

p::first-letter{
        text-decoration: overline;
        text-decoration-color: rgba(59, 119, 191, 0.68);
        display: block;
        color: red;
        font-weight: bold;
        background-color: rgba(59, 119, 191, 0.68);
        margin: 0px 2px 1px 0;
        padding: 5px 13px 5px 11px;
        color: #b1ffea;
    }

Take off p::first-line styling it is overriding your first-charecter styling — Geeky, Nov 13 '16 at 08:45
but i want that overline in the first line except for the first character — Cody, Nov 13 '16 at 08:47
You could do something like this: https://jsfiddle.net/bp7t1L47/ Notice that i had to use hex for bgr color, rather than rgba, because transparency made overline visible (i see what you have tried to do, in commented line) — sinisake, Nov 13 '16 at 09:14
While both `::first-letter` and `::first-line` *"only support a small subset of CSS properties"*, `text-decoration` is actually among both of these. https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line Also, CanIUse does not report any known issues. Looks like the one found by OP is missing. — connexo, Nov 13 '16 at 09:20
@Cody, actually, it is working, as you can see in example, but, as mentioned, usage of transparency on your background color for 'L', makes black overline from first line pseudo element visible. — sinisake, Nov 13 '16 at 09:25
Yes, It is only working in firefox not chrome. I have even tried to prefix `-webkit-` to `text-decoration-color` property. But still not working in chrome — Cody, Nov 13 '16 at 09:29

score 6 · Accepted Answer · answered Nov 13 '16 at 11:29

Simply add:

p::first-letter {
    float: left;
}

So it is:

p::first-line {
  font-weight: bold;
  text-decoration: overline;
}
p::first-letter {
  float: left;
  text-decoration: none;
  /*text-decoration-color: rgba(59, 119, 191, 0.68);*/
  display: block;
  color: red;
  font-weight: bold;
  background-color: rgba(59, 119, 191, 0.68);
  margin: 0px 2px 1px 0;
  padding: 5px 13px 5px 11px;
  color: #b1ffea;
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae!
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

@11684: See http://stackoverflow.com/questions/8853100/span-inside-a-link-issue — BoltClock, Nov 13 '16 at 17:37

score 2 · Answer 2 · edited May 23 '17 at 12:01

Not sure,if this is the right solution for it.

but yes,we can skip text-decoration using text-decoration-skip link1,link2,but it did not seem to be a good fit here.

I have tried to make L and the rest of the content as separate elements and add text-decoration to it(i know its not the right),but could help you

div{
  display:flex;
}
p.overline::first-line{
  display:inline-block;
  width:100%;
  font-weight: bold;
 text-decoration:overline;
}

p:first-child::first-letter {
  text-decoration: none;
  /*text-decoration-color: rgba(59, 119, 191, 0.68);*/

  color: red;
  font-weight: bold;
  background-color: rgba(59, 119, 191, 0.68);
  margin: 0px 2px 1px 0;
  padding: 5px 13px 5px 11px;
  color: #b1ffea;
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2>
<div>
<p >L</p>

  
<p class="overline">orem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae!
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>
</div>

Hope it helps

Rounin · Answer 3 · 2016-11-13T21:38:06.447

This is a bit hack-y, but you can easily get rid of the undesired overline by painting a small block of color over the top, using the ::after pseudo-element.

p::first-line {
  font-weight: bold;
  text-decoration: overline;
}

p::first-letter {
  text-decoration: none;
  /*text-decoration-color: rgba(59, 119, 191, 0.68);*/
  display: block;
  color: red;
  font-weight: bold;
  background-color: rgba(59, 119, 191, 0.68);
  margin: 0px 2px 1px 0;
  padding: 5px 13px 5px 11px;
  color: #b1ffea;
}

p {
position: relative;
}

p::after {
content: '';
display:block;
position:absolute;
top:0;
left:10px;
width: 16px;
height: 8px;
background-color: rgb(122,163,212);
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae!
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

score 1 · Answer 4 · answered Nov 13 '16 at 14:31

You could hide that using pseudo selector as below,

p::first-line{
  font-weight: bold;
  text-decoration:overline;
  z-index:-1;
  position:absolute;
}
p::first-letter {
  display: block;
  color: red;
  font-weight: bold;
  padding: 2px 0px 0px 0px;
}
p::before{
  content:'';
  width:10px;
  height:1px;
  background:rgba(250,250,250,1);
  position:absolute;
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae!
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

Here too if I change p::before background:transparent; won't work, as in background it consist of text-decoration:overline;. So this is how you could hide that. Just get correct background-color for your pseudo ::before background-color.

Another issue is both ::first-line and ::first-letter doesn't support all CSS styling properties.

CSS: text-decoration unable to remove overline

4 Answers4