/    Sign up×
Community /Pin to ProfileBookmark

Q:Ammending a pseudo-element onto CSS like…

Copy linkTweet thisAlerts:
Sep 27.2004

Example:

I’ve made a button…

a.button-s2:link {
border: 2px solid #000000;
background-color: #ffffff;
color: #000000;
font-size: 90%;
font-weight: normal;
padding: 8px;
text-decoration: none;
}

It works just fine. But I want CSS to generate either some type fx like :: or even better one of HTML’s special characters such as the bullet, or arrows etc.

“content” is a pseudo element but I can’t seem to get the syntax right to make this happen. Here’s one I tried that failed. Any ideas on how I could modify this to get it to work?

a.button-s2:link {
border: 2px solid #000000;
background-color: #ffffff;
color: #000000;
content: “::”;
font-size: 90%;
font-weight: normal;
padding: 8px;
text-decoration: none;
}

Thanks,
Muogin

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@Paul_JrSep 28.2004 — [font=palatino linotype]The [i]content:[/i] CSS property only applies to the [i]:before[/i] and [i]:after[/i] psuedo-elements, and is not supported by IE. So, your code would look something like this (you still need your current code for the styles):[/font]
<i>
</i>a.button-s2:link:after {
content: '::';
}

[font=palatino linotype]If you want the &#8220;::&#8221; to appear before the element, then change the [i]:after[/i] to [i]:before[/i]. Again, this [b]will not[/b] work in Internet Explorer.[/font]
Copy linkTweet thisAlerts:
@fredmvSep 28.2004 — [i]Originally posted by muogin [/i]

[B]one of HTML's special characters such as the bullet, or arrows etc.[/B][/QUOTE]You'll want to be using [url=http://www.unicode.org/]Unicode[/url] for that. Check out [url=http://www.alanwood.net/unicode/arrows.html]this demo page[/url] for tons of unicode arrows. When you use such characters in CSS, however, make sure to properly escape them:content: '2192';
Copy linkTweet thisAlerts:
@muoginauthorSep 28.2004 — Thanks! You read my mind, that was to be my next question.

Now which of the columns do I use for input the DECimal or HEX?

If HEX do I enter it exact or do I have to translate it all to numbers somehow?

Example: which on of these would I enter to get this symbol:

&#8714; 8714 220A SMALL ELEMENT OF

Thanks,

Muogin?

[i]Originally posted by fredmv [/i]

[B]You'll want to be using [url=http://www.unicode.org/]Unicode[/url] for that. Check out [url=http://www.alanwood.net/unicode/arrows.html]this demo page[/url] for tons of unicode arrows. When you use such characters in CSS, however, make sure to properly escape them:content: '2192'; [/B][/QUOTE]
Copy linkTweet thisAlerts:
@muoginauthorSep 28.2004 — Hmm, the content property does nothing in IE?

Thanks for the join syntax though indeed.

-Muogin?

[i]Originally posted by Paul Jr [/i]

[B][font=palatino linotype]The [i]content:[/i] CSS property only applies to the [i]:before[/i] and [i]:after[/i] psuedo-elements, and is not supported by IE. So, your code would look something like this (you still need your current code for the styles):[/font]

<i>
</i>a.button-s2:link:after {
content: '::';
}

[font=palatino linotype]If you want the &#8220;::&#8221; to appear before the element, then change the [i]:after[/i] to [i]:before[/i]. Again, this [b]will not[/b] work in Internet Explorer.[/font] [/B][/QUOTE]
Copy linkTweet thisAlerts:
@Paul_JrSep 28.2004 — [i]Originally posted by muogin [/i]

[B]Example: which on of these would I enter to get this symbol:



&#8714; 8714 220A SMALL ELEMENT OF[/B][/QUOTE]
[font=palatino linotype]You would use 220A:[/font]
<i>
</i>a.button-s2:link:after {
content: '220A';
}


[i]Originally posted by muogin [/i]

[B]Hmm, the content property does nothing in IE?[/B][/QUOTE]
[font=palatino linotype]Correct. IE&#8217;s CSS support is not very good.[/font]
×

Success!

Help @muogin spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...