INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Adding a CSS attribute overlay using ::after

Adding a CSS attribute overlay using ::after

(OP)
I'm trying to add a label to some existing styles that I have to display code on my page using the ::after pseudo-tag, but I can't seem to position it correctly,

I'm basing it on the "Label blocks of code with the language it is in" example from https://css-tricks.com/pseudo-element-roundup/ and looking for it to look like the following image from that page



It should be :

1. top right of the container attached to (in this case one of more <p> tags on the page)
2. only present if the Attribute is provided - rather than the box appearing with no content.

What I have at present is :

CODE --> CSS

.code{font-family:arial,verdana,"times new roman",courier,helvetica,sans-serif;}
.code:after{content:attr(codelang);top:22px;right:2px;border:red 2px solid} 

used as follows :

CODE --> HTML

<p class="code" codelang="Javascript">
function add(a,b)
{
return a+b
} </p> The above snippet shows some <span class="code">Javascript</a> code and the following snippet is the same function in OScript : <p class="code"> function add(integer a, integer b)
return a+b
end </p>

in the sample above, only the first "code" styled element should have the change.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
http://www.greggriffiths.org/livelink/

RE: Adding a CSS attribute overlay using ::after

Quote:

in the sample above, only the first "code" styled element should have the change.

Not quite, all elements with a 'code' class will have the 'change', but only elements with the codelang attribute will display the added content is what I guess you really mean

However;
your content syntax is incorrect because it needs to be EXACTLY as the example is, including the parenthesis and quote marks.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

RE: Adding a CSS attribute overlay using ::after

(OP)
Chris,
Thanks for the pointer, amended the CSS as follows :

CODE --> CSS

.code:after{content:" (" attr(codelang) ") ";top:22px;right:2px;border:red 2px solid} 

Still getting the box appearing immediately after the <P> tag's content and not in the top right at the same level as the first line of the <P> tag's content.

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
http://www.greggriffiths.org/livelink/

RE: Adding a CSS attribute overlay using ::after


Positioning offset property values only affect elements that are NOT statically positioned.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

RE: Adding a CSS attribute overlay using ::after

(OP)
thanks for the references Feherke, am in the process of upgrading my site from HTML4 to HTML5 so will include those changes.

did you have chance to look at the positioning part of the question ?

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
http://www.greggriffiths.org/livelink/

RE: Adding a CSS attribute overlay using ::after

Hi

Quote (Greg)

did you have chance to look at the positioning part of the question ?
Yes. And reached the same conclusion as Chris :

Quote (Chris)

Positioning offset property values only affect elements that are NOT statically positioned.
The example you linked to has position: absolute; while the CSS you posted not has it. So I assumed, part of the CSS is declared elsewhere and the part of problem that is not reproducible with the posted fragment is not to be debugged here and now...

Feherke.
feherke.github.io

RE: Adding a CSS attribute overlay using ::after

(OP)
I just lifted the CSS in my example directly from the linked article, if I remove the position absolute it sits after the content of the tag the :After refers to, I could push the height and width, but each instance would be different, is there a way to do this simply ?

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
http://www.greggriffiths.org/livelink/

RE: Adding a CSS attribute overlay using ::after

position: relative; is what you should be using.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close