2017-04-25 46 views
0

enter image description here如何在CSS中进行自定义高亮显示?

^类似的东西 - 它使用:后? (无法做到多行)

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

你可以使用两个H3的位置属性和: – Ibu

+0

后':: after'伪元素有两个冒号。一个冒号是旧的语法,不应该再使用。 https://developer.mozilla.org/en-US/docs/Web/CSS/:: – Rob

回答

1

是的,你可以使用伪元素。这里有一种绝对定位在h3中的负z指数的方法。

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; 
 
}
<h3>text</h3>

+0

':: after'伪元素有两个冒号。一个冒号是旧的语法,不应该再使用。 https://developer.mozilla.org/en-US/docs/Web/CSS/:: – Rob

+0

@Rob是啊我知道,但IE的旧版本不认识':: after',只能用于:之后,但所有较新的浏览器都支持这两种浏览器。在现代浏览器停止支持':after'之前,我宁愿覆盖我的基地,并使用':after'来满足浏览器的要求。 https://msdn.microsoft.com/library/cc304078(v=vs.85).aspx –

+0

让我们这样说吧。如果您**必须**支持Microsoft的Internet Explorer 8或更高版本,请使用':after'。没有其他原因。否则,请退出支持Microsoft Internet Explorer 8及更高版本。 – Rob

0

试试这个:

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

让我知道你走了。

干杯

相关问题