小荧光笔效果[重复]答案

【问题标题】：Small highlighter effect [duplicate]小荧光笔效果[重复]
【发布时间】：2021-02-14 05:01:47
【问题描述】：

我想得到一个像荧光笔一样的css效果

我找到了一些答案，例如Pen highlighter effect in css。但是，如您在示例中所见，我怎样才能使这种荧光笔效果变小呢？

【问题讨论】：

标签： css

【解决方案1】：

你可以这样做

.underline span {
 display: inline-block;
 background-position-y: -0%;
 background-image: linear-gradient( transparent 50%, #0095ff 50%);
 transition: background .3s ease;
 background-size: 2px;
 background-size: auto 175%;
 text-decoration: none;
 font-weight: 600;
}

<p class="underline">
  This sentence has <span>Highlighted Text</span> in the middle.
</p>

【讨论】：

这不符合 OP 的要求。这会突出显示整个文本，而不仅仅是底部

【解决方案2】：

我会使用 ::after 伪元素来突出显示。这是一个例子：

.highlight {
  position: relative;
}


.highlight::after {
  content: " ";
  left: 0;
  right: 0;
  position: absolute;
  bottom: 1px;
  height: 6px;
  background-color: #9bffb0a6;
  z-index: -1;
  
  
}

&lt;div&gt;&lt;span class="highlight"&gt;Cloud Native&lt;/span&gt;: Cloud Training, Cloud Development, Cloud Architecture, Cloud Assesment....&lt;/div&gt;

只要 .highlight 类用于您想要突出显示的任何文本。

【讨论】：

当然你可以改变 background-color 来改变高亮颜色，改变 height 属性来改变高亮的高度。
我还有一个问题 - 当链接悬停时，我想让绿色变暗。你有什么想法吗？
你可以这样做： .highlight:hover::after { background-color: #63b574ad; }