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{…
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=""…
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…
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,…
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.
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…
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 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:…
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…
How can I get the link to have a underline but the (fontawesome) icon ::before not? ::before text decoration:none; doesn't work .btn--tertiary { font-size: 16px; line-height: 24px; padding-left: 0; color: #007e9e; text-decoration: underline; border: 0 solid #fff; background-color: #fff; display:…