参见英文答案 >
Why do the :before and :after pseudo-elements require a ‘content’ property?4个
我想在打开工具提示的某些表单域的末尾添加一个帮助标志.
我想在打开工具提示的某些表单域的末尾添加一个帮助标志.
一切正常,但.helptip图标(http://img1.wsimg.com/shared/img/1/small-help-icon.gif)正在左侧(合并)与文本.我实际上想要在跨文本的右边,所以我做了.help-tip：之后.但是什么都没有显示出来.
你能发现什么问题吗？
<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;
}
解决方法
你现在似乎没有使用伪元素.尝试这个设置.help-tip到.help-tip :: after和give是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");
}
