相关疑难解决方法(0)

鉴于以下场景,为什么:after选择器需要内容属性才能运行？

.test {
    width: 20px;
    height: 20px;
    background: blue;
    position:relative;
}
			
.test:after {
    width: 20px;
    height: 20px;
    background: red;
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
}

<div class="test"></div>

注意在指定content属性之前如何看不到伪元素:

.test {
    width: 20px;
    height: 20px;
    background: blue;
    position:relative;
}
			
.test:after {
    width: 20px;
    height: 20px;
    background: red;
    display: block;
    position: absolute;
    top: 0px;
    left: 20px;
    content:"hi";
}

<div class="test"></div>

为什么这是预期的功能？你会认为显示块会强制元素出现.奇怪的是,您实际上可以在Web调试器中看到样式; 但是,它们不会显示在页面上.

我想在一些表单字段的末尾添加一个帮助徽标,打开工具提示.

一切正常,但.helptip图标(http://img1.wsimg.com/shared/img/1/small-help-icon.gif)左侧(合并)文本.我实际上想要在span文本的右边,所以我做了.help-tip:after.但是根本没有任何东西出现.

你能发现什么是错的吗？

<div class="advancedSearchFormSelectField fclear">
<span id="view_format_mis" class="advancedSearchFormlabel help-tip"> Include Columns in Result Set </span>

<select class="advancedSearchFormSelectBox" id="filters_include_columns" multiple="multiple" name="filters[include_columns][]">

<option value="x">X</option>
<option value="y">Y</option>
<option value="z">Z</option>
</select>
</div>

<div class="advancedSearchFormSelectField fclear">
<span id="view_format_mis" class="advancedSearchFormlabel"> Sort Column </span>
<!--No help tip here -->    
<select class="advancedSearchFormSelectBox" id="filters_sort_columns" multiple="multiple" name="filters[sort_columns]">

<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>

.help-tip {
/* Merged text at the moment. .help-tip:after not working */ 
    cursor: pointer;
    width: 10px;
    height: 10px;
    background-repeat: no-repeat;
    background-image: url("/assets/small-help-icon.gif"); …