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

时间:2014-01-20 14:27:37

标签: html css firefox

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

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

以下是我的代码(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概念,但没有运气。

2 个答案:

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