CODEWITHSUNDEEP
htmlcss
aquavitae
aquavitae

Reputation: 19154

CSS padding before content

I want to include some padding after the before in a button, but only if there is also text content. So given

<button class="btn-action"></button>

The css would be 

.btn-action:before {
    content: "X";
}

and given 

<button class="btn-action">Text</button>

the css would be

.btn-action:before {
    content: "X";
    padding-right: 0.35em;
}

But I can't figure out how to write a single css class that handles both cases. If I was dealing with real elements I could probably use a selector such as:

.btn-action:before + content {
    padding-right: 0.35em;
}

but AFAIK this can't be done. Any suggestions?

Upvotes: 0

Views: 170

Answers (1)

K K
K K

Reputation: 18109

You can use :empty selector.

CSS:

.btn-action:empty:before {
    padding:0;
}
.btn-action:before {
    content:"X";
    padding-right: 0.35em;
}

Demo: http://jsfiddle.net/lotusgodkk/70vkfmsd/2/

Updated the padding.

Note: Make sure that there is no white-space in the empty button for this to work.

Upvotes: 4

Related Questions