CSS 不显示后的伪元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15783361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pseudo-element after not showing?
提问by Pratik Bothra
I want to add a help logo at the end of some form fields which opens a tooltip.
我想在打开工具提示的某些表单字段的末尾添加一个帮助徽标。
Everything is working, but the .helptip icon (http://img1.wsimg.com/shared/img/1/small-help-icon.gif) is coming on the left(merged) with the text. I actually want in on the right of span text, so I did .help-tip:after. But then nothing shows up at all.
一切正常，但 .helptip 图标（http://img1.wsimg.com/shared/img/1/small-help-icon.gif）与文本一起出现在左侧（合并）。我实际上想要在跨度文本的右侧，所以我做了 .help-tip:after。但随后什么也没有出现。
Can you spot what's wrong?
你能看出哪里出了问题吗？
<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");
}
.advancedSearchFormSelectField{
width:300px;
margin: 5px;
height: 60px;
float:left;
}
回答by Daniel Imms
You don't seem to be using a pseudo-element at the moment. Try this setting .help-tipto .help-tip::afterand giving is content: ""and display: inline-block:
您目前似乎没有使用伪元素。试试这个设置.help-tip来.help-tip::after和给予是content: ""和display: inline-block：
.help-tip::after {
content: "";
display: inline-block;
cursor: pointer;
width: 10px;
height: 10px;
background-repeat: no-repeat;
background-image: url("/assets/small-help-icon.gif");
}
