logo标签列表

CSS：text-decoration 无法删除上划线。

htmlcss
11

我试图使用p::first-letter选择器从第一个字母中删除文本装饰。但由于某种未知的原因，我无法做到这一点。

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>

更新：

好的，我通过启用“实验性网络平台功能”在Chrome中让它工作了。由于某种原因前缀-webkit-无法触发此行为。这是可行的代码。

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;
    }
去掉 p::first-line 样式，它正在覆盖你的首字符样式。 - Geeky
但是我希望在第一行中除了第一个字符外，其他字符都有上划线。 - Cody
1
你可以像这样做：https://jsfiddle.net/bp7t1L47/ 注意，我不得不使用十六进制的bgr颜色，而不是rgba，因为透明度会使上划线可见（我看到了你在注释行中尝试做的事情）。 - sinisake
"text-decoration-color" 不起作用。 - Cody
1
是的，它只在火狐浏览器中工作，而非谷歌。我甚至尝试过在"text-decoration-color"属性前加上"-webkit-"前缀，但在谷歌浏览器中仍然无法工作。 - Cody
显示剩余5条评论
4个回答
6
只需添加以下内容：
p::first-letter {
    float: left;
}

所以，它就是这样： 

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
@11684：请参考https://dev59.com/21_Va4cB1Zd3GeqPRkAr。 - BoltClock
2

我不确定这是否是正确的解决方案。

但是，我们可以使用text-decoration-skip跳过文本装饰 链接1，链接2，但这似乎不适用于这里。

我尝试将L和其余内容作为单独的元素并将text-decoration添加到它（我知道这不是正确的方法），但这可能有所帮助。

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>

希望这有所帮助。
1
这有点hack-y，但是你可以使用::after伪元素，在顶部绘制一个小色块，轻松摆脱不需要的上划线。 

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>

1
您可以使用以下伪选择器来隐藏它， 

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>

如果我改变p::before的background:transparent;也不会起作用，因为它由text-decoration:overline;组成。所以这就是你可以隐藏它的方法。只需获取正确的pseudo ::before background-color即可。

另一个问题是::first-line和::first-letter并不支持所有CSS样式属性。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接