伪元素after不显示怎么办？

Question

伪元素after不显示怎么办？

32

我想在一些表单字段的末尾添加一个帮助图标，它可以打开一个工具提示。

所有的东西都正常工作，但是.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");
}

.advancedSearchFormSelectField{
    width:300px;
    margin: 5px;
    height: 60px;
    float:left;
}

- Pratik Bothra

1

你的“after”类在哪里？你使用什么浏览器？ - benams

7

为了避免其他人犯我所犯的愚蠢错误，我写了一份快速提示：如果外层元素设置了overflow: hidden属性，:after伪元素将不会显示... - SRack

对我来说，问题在于after无法在图像标签上工作。 - Simon Ludwig

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel Imms · Accepted Answer

您目前似乎未使用伪元素。尝试将此设置从 .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");
}