Pseudo-element after not showing?

Question

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.

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;
}

Quick note to avoid others making the same stupid mistake I have: if the outer element has `overflow` set to `hidden`, the `:after` pseudo element won't show... — SRack, Jun 08 '16 at 16:28
For me the problem was that after did not work on an image tag — Simon Ludwig, May 23 '20 at 22:37

Daniel Imms · Accepted Answer · 2015-03-19T17:22:44.700

62

You don't seem to be using a pseudo-element at the moment. Try this setting .help-tip to .help-tip::after and giving is content: "" and 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");
}

edited Mar 19 '15 at 17:22

answered Apr 03 '13 at 09:23

Daniel Imms

45,529
17
143
160

Hey, it's showing perfectly. I think it's cause of the display:inline-block. One problem though is $(".help-tip").live ('click',function()....., isn't working any longer when you click the gif. It's working when you click the text. What should I do? – Pratik Bothra Apr 03 '13 at 09:30
UPDATE - Working in firefox but not in Chrome...WHY? – Pratik Bothra Apr 03 '13 at 09:41
Difficult to say without seeing an example, all looks fine so it's probably some tiny thing. – Daniel Imms Apr 03 '13 at 09:44
To me, it worked only with `content: '';` and not with `content: "";` – RK Coder Mar 18 '21 at 10:41

Pseudo-element after not showing?

1 Answers1

Linked

Related