Is there a way we can dynamically add pseudo-element css as inline css

Question

Is there a way i can add below css as inline css using C# from codebehind

CSS

.slide .btn_six::after {
    content: " ECHNOLOGY";
}

HTML

<div class="slide">
<a target="_blank" href="#" class="post-badge btn_six">T</a>
</div>

I have to list multiple articles and each article belongs to a category and each category i have to show in an animated manner where only first caharacter of word will be visible and when user hovers over it it then reveal whole category name as shown in template link.

I want to do this using C# from the codebehind file itself as it will be easy

I looked for example but could not find any relevant example

What about just using CSS, e.g. including the whole word but setting .post-badge { visibility: hidden; } and .post-badge:first-letter { visibility: visible; }? — denmch
– denmch, Commented Jan 21, 2018 at 7:26
@denmch, could you explain more it looks if i understood should work — Learning
– Learning, Commented Jan 21, 2018 at 7:36
The contents of the a element might hold the entire word, e.g., Technology. Setting it to visibility: hidden but with :first-letter set to visible, you’ll see T but not echnology, though it will reserve space. You can add a third rule that sets the whole element to visible on hover. — denmch
– denmch, Commented Jan 21, 2018 at 7:58
@denmch, i tried but it is not showing the first character codepen.io/anon/pen/rpPKvJ — Learning
– Learning, Commented Jan 21, 2018 at 8:08
Even though it is possible I recommend not doing it this way, since you can very well do it just with css. Looks like you need css with dynamic content, in that case you can generate the html with data atrribute and in css show content based on it: developer.mozilla.org/en-US/docs/Learn/HTML/Howto/… . It depends a bit on what browsers you have to support. — CrudaLilium
– CrudaLilium, Commented Jan 21, 2018 at 8:18

NightOwl888 · Accepted Answer · 2018-01-21 07:26:43Z

2

Can't be done.

A hover event is only possible to do from the client side with JavaScript or by using CSS :hover selector. While it could be possible to wire it up to send a request back to the server to write a segment of HTML and then replace the HTML element in JavaScript, this would not be very practical. It is much simpler just to write the class on the client side without making a round trip to the server or better yet, just set a CSS :hover and be done with it.

answered Jan 21, 2018 at 7:26

NightOwl888

57.1k28 gold badges148 silver badges222 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is there a way we can dynamically add pseudo-element css as inline css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related