Html – ::before clickable icon
I'm trying to make the link icon in my code clickable so that the user can click anywhere in the card to go to another page. I've tried (" attr(href) ") but that added the URL text next to the…
Css – Can i move or translate() pseudo element (::after, ::before) under a text on hover?
I'm trying to translateX() a 'dot' under a text from one end to another, but just across the width of the text. Here's what I've tried, but it doesn't work. Have you any solutions to that? .wrapper ul li a::before{…
Html – when click the menu change the ::after background
how can i change the color of ::after pseudo-element when i click the a tag? this is my html code: <div class="menu"> <div class="row" style="justify-content: center;"> <div class="menu-item"> <a href="" class="row" id="border" onclick="change(0)"> <span>home</span> </a> </div> <div class="menu-item"> <a href=""…
Html – How to prevent ::before / ::after elements influencing the breaking behaviour of spans?
Since there are no spaces in between the <span> elements, I expect them not to wrap but all sit on the same line, which seems to be the case in all browsers span { position: relative; } <span>Fooooooooooooooooooooooooooooooooooooooooooooooooo</span><span>foo</span><span>Baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaar</span><span>bar</span> But when…
Html – How to avoid using specific pixel value on bottom property for ::after
I've got a banner that when hovered on displays an "underline" at the bottom of the container. Currently it's achieved using ::after and the functionality is perfect, but I don't like having to be so specific with the bottom: -65px,…
Can I hide/disable ::marker pseudo-element in WordPress for Safari?
I have one problem. I can't hide ::marker for safari. #categories-4.widget_categories::marker { content: '' !important; } It works fine for example for chrome or microsoft edge. Thanks for any help.
CSS before inherit height from it's element – Html
So I'm trying to build a pop-up block for switching the language on a website. Due to the design having certain shadows, I need to build the shadow separately from the pop-up block itself. so I wanted to position it…
CSS "overflow: hidden;" still works on the pseudo "::after"
content: '>'; in ::after is clipped by overflow: hidden; .centered-text { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 30vw; } .centered-text::before { content: '<'; } .centered-text::after { content: '>'; } <div style="text-align:center;"> <span style="float:left;">I'm on the left</span> <span…
I can not type on the div tag if I click on the content of :before – Html
I have created this div for getting comment input from user. <div role="textarea" aria-expanded={false} contentEditable ref={commentBoxRef} className={modalStyle.commentInput} onKeyDown={handleKeyDown} /> Here is the css. .commentInput { width: 100%; height: 100%; outline: none; overflow-y: scroll; padding: 4px; background-color: #242424; border-radius: 8px; resize:…
How To Change A Pseudo Element On Click – Jquery
I am trying to make a click handler in jQuery that changes the color of an 'eyebrow' element above a Heading element. I know that pseudo elements are not part of the actual DOM, but the way that this is…