我正在尝试使用页面中的伪元素创建一些效果
问题是我无法选择真实元素的文本,如何解决这个问题。
以下是我的代码(Fiddle):
目前适用于Chrome但不适用于Firefox
HTML:
<div class="wrp">
<div class="viscu">Can't Select</div>
</div>
CSS:
.viscu{text-align:Center;
background-color:transparent;
color:#0569B6;
border-radius:5px;
position:relative;
text-shadow:1px 1px 0px #96FAFF;
padding:5px;
}
.viscu:before{
border:1px dashed #89EDFC;
margin-top:1px;
margin-left:1px;}
.viscu:after{
border:1px dashed #2286D3;
margin-top:0px;
margin-left:0px;}
.viscu:before,.viscu:after{
position:absolute;
width:100%;
height:100%;
content:"";
display:block;
top:0px;
left:0px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;}
.wrp{
float:left;
width:200px;
margin-left:5%;
background-color:#9CF;
padding:20px;}
这是Fiddle 我尝试过使用Z-index概念,但没有运气。
答案 0 :(得分:1)
好像你需要z-index
但是为了让它工作需要一个额外的标签:
<div class="wrp">
<div class="viscu"><span>Can't Select</span></div>
</div>
在CSS中:
.viscu span {
position:relative;
z-index:1
}
选中此Demo
答案 1 :(得分:0)
您的伪元素只是覆盖文本,使它们可选,您只需要添加以下内容。
.viscu:before,
.viscu:after {
pointer-events: none;
}