伪元素不显示

我想补充::之前和::对于复选框after伪元素，但经过psudo没有显示，当我们选中该复选框项目伪元素不显示

以下CSS和HTML元素我用

.multiselect-container li input { 
 
    opacity: 0; 
 
    position: relative !important; 
 
    left: -4px; 
 
    top: 2px; 
 
    z-index: 999; 
 
} 
 
.multiselect-container li { 
 
    position: relative; 
 
} 
 
.multiselect-container li label { 
 
    padding: 4px 20px 3px 40px !important; 
 
} 
 
.multiselect-container li span::before { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid #ccc; 
 
    position: absolute; 
 
    content: ''; 
 
    left: 12px; 
 
    top: 5px; 
 
} 
 
.multiselect-container li span::after { 
 
    width: 18px; 
 
    height: 18px; 
 
    background: #093c73 url(../images/tick.png) no-repeat 2px 2px; 
 
    position: absolute; 
 
    content: ''; 
 
    left: 13px; 
 
    top: 6px; 
 
    display: none; 
 
} 
 
.multiselect-container li input[type="checkbox"]:checked + .multiselect-container li span::after { 
 
    display: block; 
 
}

<ul class="multiselect-container"> 
 
    <li> 
 
    <label class="checkbox"> 
 
     <input type="checkbox" value="option1">Option1</label> 
 
    <span></span> 
 
    </li> 
 
</ul>

来源

2017-01-23 Sudeep

你的最后一个选择是错误的。您试图选择一个匹配选择器'.multiselect-container li span'的元素，表示选中的输入字段的后面的兄弟节点 - 但当然没有这样的元素。 – CBroe

仔细检查在CSS VS的HTML的结构选择。你不能像你在CSS中输入那样做选择器。

跨度需要在输入后直接输入：复选框，而不是标签后面。

.multiselect-container li input { 
 
    opacity: 0; 
 
    position: relative !important; 
 
    left: -4px; 
 
    top: 2px; 
 
    z-index: 999; 
 
} 
 

 
.multiselect-container li { 
 
    position: relative; 
 
} 
 

 
.multiselect-container li label { 
 
    padding: 4px 20px 3px 40px !important; 
 
} 
 

 
.multiselect-container li span::before { 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid #ccc; 
 
    position: absolute; 
 
    content: ''; 
 
    left: 12px; 
 
    top: 5px; 
 
} 
 

 
.multiselect-container li span::after { 
 
    width: 18px; 
 
    height: 18px; 
 
    background: #093c73 url(../images/tick.png) no-repeat 2px 2px; 
 
    position: absolute; 
 
    content: ''; 
 
    left: 13px; 
 
    top: 6px; 
 
    display: none; 
 
} 
 

 
.multiselect-container li input[type="checkbox"]:checked + span::after { 
 
    display: block; 
 
}

<ul class="multiselect-container"> 
 
    <li> 
 
    <label class="checkbox"> 
 
     <input type="checkbox" value="option1">Option1 
 
     <span></span> 
 
    </label> 
 
    </li> 
 
</ul>

来源

2017-01-23 09:52:07 seemly

伪元素不显示

回答

相关问题