Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: text-decoration unable to remove overline [duplicate]

Tags:

html

css

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;
    }
like image 963
Cody Avatar asked Nov 13 '16 08:11

Cody


People also ask

How do I remove the text-decoration in CSS?

By setting the text-decoration to none to remove the underline from anchor tag. Syntax: text-decoration: none; Example 1: This example sets the text-decoration property to none.

What does text-decoration overline do?

The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text.

Which of the following is NOT used with text-decoration property?

4. Which of the following is not used with text-decoration property? Explanation: overline, underline, line-through properties are used to decorate the text. it will produce headings h1 with text having line-through, h2 with text having overline and h3 with text having underline.


2 Answers

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>
like image 99
Alvaro Avatar answered Sep 19 '22 15:09

Alvaro


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

like image 37
Geeky Avatar answered Sep 21 '22 15:09

Geeky