如何在css中制作自定义高亮显示？

Question

^类似的东西 - 是否使用：之后？ （无法为多行做到这一点）

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

Answer 1

是的，您可以使用伪元素。这是一种绝对定位于h3的方式，具有负z-指数。

＆＃13;

＆＃13;

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;
}

＆＃13;

<h3>text</h3>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试一下：

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

以下是行动中的代码：

＆＃13;

＆＃13;

.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 */}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

让我知道你怎么走。

干杯