html - 使用伪元素后无法选择文本

Question

我正在尝试在页面中使用伪元素创建一些效果

问题是我无法选择真实元素的文本，如何解决这个问题。

以下是我的代码(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 概念，但没有成功。

Answer 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