web-dev-qa-db-ja.com

表示されない後の擬似要素？

いくつかのフォームフィールドの最後に、ツールチップを開くヘルプロゴを追加したい。

すべてが機能していますが、.helptipアイコン（ http://img1.wsimg.com/shared/img/1/small-help-icon.gif ）が左側にあります（マージ）テキスト。実際にスパンテキストの右側に配置したいので、.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;
}
csscss3pseudo-element
17
Pratik Bothra

現時点では擬似要素を使用していないようです。この設定を試してください.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");
}
38
Daniel Imms