如何在 css 中进行自定义高亮显示？答案

【问题标题】：How do I make a custom highlight in css?如何在 css 中进行自定义高亮显示？
【发布时间】：2017-04-26 08:37:04
【问题描述】：

^ 类似的东西 - 它使用 :after 吗？（无法为多行执行此操作）

.home-about h3:after{
 margin-top:-15px;
 content: " ";
 background:#d7edf4;
 z-index: 0;
}

【问题讨论】：

你可以在 h3 和 :after 上使用 position 属性
::after 伪元素有两个冒号。一个冒号是不应再使用的旧语法。 developer.mozilla.org/en-US/docs/Web/CSS/::after

标签： css highlight underline

【解决方案1】：

是的，您可以使用伪元素。这是一种绝对定位在 h3 中的方式，z-index 为负。

h3 {
  position: relative;
  display: inline-block;
}

h3:after {
  content: " ";
  background: #d7edf4;
  z-index: -1;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: .4em;
}

&lt;h3&gt;text&lt;/h3&gt;

【讨论】：

::after 伪元素有两个冒号。一个冒号是不应再使用的旧语法。 developer.mozilla.org/en-US/docs/Web/CSS/::after
@Rob 是的，我知道，但旧版本的 IE 无法识别 ::after，只能与 :after 一起使用，但所有较新的浏览器都支持这两者。在现代浏览器停止支持:after 之前，我宁愿覆盖我的基础并使用:after 来实现浏览器合规性。 msdn.microsoft.com/library/cc304078(v=vs.85).aspx
这样说吧。如果您必须支持 Microsoft 的 Internet Explorer 8 或更低版本，请使用:after。没有其他原因。否则，请停止支持 Microsoft Internet Explorer 8 及更早版本。

【解决方案2】：

试一试：

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

下面是实际代码：

.Pink::selection {background: #ffb7b7; /* WebKit/Blink Browsers */}
.Pink::-moz-selection {background: #ffb7b7; /* Gecko Browsers */}

.DarkRed::selection {background: #ff0000; /* WebKit/Blink Browsers */}
.DarkRed::-moz-selection {background: #ff0000; /* Gecko Browsers */}

<p class="Pink">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique quam in ex posuere, eu commodo velit sodales. Vestibulum at volutpat lorem, quis interdum diam. Phasellus metus sem, lobortis eu neque eget, tincidunt hendrerit purus. Sed mollis orci dapibus lectus blandit, eget fringilla sapien ullamcorper. Aenean accumsan justo sit amet sapien finibus tincidunt. Nam vitae purus ligula. Nunc quis neque id enim ultricies euismod at id metus. In hac habitasse platea dictumst. Sed suscipit, augue id tempus blandit, orci sem faucibus turpis, ac volutpat sem enim eleifend dui. Maecenas congue augue at lacus viverra rhoncus. </p>

<p class="DarkRed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique quam in ex posuere, eu commodo velit sodales. Vestibulum at volutpat lorem, quis interdum diam. Phasellus metus sem, lobortis eu neque eget, tincidunt hendrerit purus. Sed mollis orci dapibus lectus blandit, eget fringilla sapien ullamcorper. Aenean accumsan justo sit amet sapien finibus tincidunt. Nam vitae purus ligula. Nunc quis neque id enim ultricies euismod at id metus. In hac habitasse platea dictumst. Sed suscipit, augue id tempus blandit, orci sem faucibus turpis, ac volutpat sem enim eleifend dui. Maecenas congue augue at lacus viverra rhoncus. </p>

告诉我你的情况。

干杯

【讨论】：