Adding a CSS attribute overlay using ::after 1

[ggriffit]

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{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 :

<p class="code" codelang="Javascript">
function add(a,b)
{
[indent]return a+b[/indent]
}
</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)
[indent]return a+b[/indent]
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/

 

[ChrisHirst]

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.

 

[ggriffit]

Chris,

Thanks for the pointer, amended the CSS as follows :​

.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/

 

[ChrisHirst]

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.

 

[feherke]

Hi

Attribute selector's simplest form checks only attribute presence :

.code[codelang][teal]::[/teal]after [teal]{[/teal] content: [green][i]" ("[/i][/green] attr(codelang) [green][i]") "[/i][/green][teal];[/teal] [gray]/*...*/[/gray] [teal]}[/teal]

Regarding the [tt]p[/tt] tag, I would suggest to use the recommended semantic HTML for code block, [tt]<pre><code>[/tt] .. [tt]</code></pre>[/tt] instead.
Regarding that codelang attribute, I would suggest to use [tt]data-*[/tt] attributes instead.

Feherke.
feherke.github.io

 

[ggriffit]

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/

 

[feherke]

Hi

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

Yes. And reached the same conclusion as Chris :

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

The example you linked to has [tt]position: absolute;[/tt] 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

 

[ggriffit]

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/

 

[ChrisHirst]

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.