pseudo-element

How to change pseudo-element child when parent is hovered over?

由 只谈情不闲聊 提交于 2021-01-27 14:31:01
问题 I'm trying to get an item that is a pseudo element to change when the parent is hovered over. The pseudo element here is .child:after. I know this works: .parent:hover .child { background: #FF0000; } But this does not seem to work: .parent:hover .child:after { background: #FF0000; } Any ideas? Thank you!! 回答1: Try to add content:'' to ::after pseudo-class; Also be aware that :after works with non-replaced elements (im, input, textarea, and so on) (refference: replaced elements.) Additionally:

CSS outline width not working

由 早过忘川 提交于 2021-01-27 13:02:54
问题 I am trying to set outline width of the input element on focus. Outline width stays the same (like it is default setting which can not be changed), no matter of my setting. Here is example from code pen And here is part from css where I am trying to set outline-width on focus: input:focus { outline-width: 0.1px; outline-color: #725b44; } EDIT: I've just forgotten to include line style (solid, dotted...). Now it works. One thing is still strange to me. Why is outline inside element? Isnt' the

Why can text-decoration in ::first-letter not cascade text-decoration in ::first-line?

由 跟風遠走 提交于 2021-01-27 05:54:01
问题 It seems that text-decoration in ::first-letter can not cascade text-decoration in ::first-line . Here is the code: p::first-line { color: orange; font-size: 22px; text-decoration: line-through; } p::first-letter { color: green; font-size: 36px; text-transform: capitalize; text-decoration: none !important; } <p> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Did CSS has second-letter pseudo element

由 久未见 提交于 2021-01-23 10:58:32
问题 I'm using a CSS style for a letter to change a color of a first second third letter. like this: .header .logo h1 > a:first-letter { color: #f91ea5; } but I don't know how to change a color of second and third letter it's don't have a second-letter element. 回答1: I think, you cannot use pseudo elements as :second-letter or :third-letter . It's by design. But if it's realy necessary, then use JavaScript, for example: this or this. 回答2: No, there is no selector for second or third letter, in

CSS active selector using after pseudo element

由 拥有回忆 提交于 2021-01-20 07:59:28
问题 I have a problem to achieve on active icon selector on after pseudo selector. Below is the code which am tried. <html> <head> <style type="text/css"> .btn{ width:25%; } .name{ background: #fff; color: #000; text-align: center; height: 35px; line-height: 35px; font-size: 18px; border: 1px solid; } .name:after{ content: ""; position: absolute; left: 210px; top: 19px; background-image: url('dark.png'); width: 15px; height: 15px; background-size: 100% auto; } .name:after:active{ background-image:

CSS active selector using after pseudo element

由 不问归期 提交于 2021-01-20 07:58:43
问题 I have a problem to achieve on active icon selector on after pseudo selector. Below is the code which am tried. <html> <head> <style type="text/css"> .btn{ width:25%; } .name{ background: #fff; color: #000; text-align: center; height: 35px; line-height: 35px; font-size: 18px; border: 1px solid; } .name:after{ content: ""; position: absolute; left: 210px; top: 19px; background-image: url('dark.png'); width: 15px; height: 15px; background-size: 100% auto; } .name:after:active{ background-image:

Retrieve a pseudo element's content property value using JavaScript

由 懵懂的女人 提交于 2020-12-20 20:09:09
问题 I have the following jQuery code: $.each($(".coin"), function() { var content = "/*:before content*/"; $("input", this).val(content); }); I'd like to change the value of each input element using jQuery based on its pseudo element's content property value ( .coin:before ). Here a example: http://jsfiddle.net/aledroner/s2mgd1mo/2/ 回答1: According to MDN, the second parameter to the .getComputedStyle() method is the pseudo element: var style = window.getComputedStyle(element[, pseudoElt]);

jQuery hover effect for ::after

由 喜你入骨 提交于 2020-12-13 04:03:32
问题 I'm firing several effects when I hover over a div. The problem is that the div also has the pseudo element ::after, which populates the div with a virtual element (a play button) using the content CSS rule. My hover effects work when I'm hovering any part of the div other than the space where the ::after element is. Simply, I want to know if there is a way to point towards the ::after element using jQuery. I've tried to define the ::after element as a variable named "play", but have had no

Why is '::after' pseudo-selector over the image and not under it? [duplicate]

由 情到浓时终转凉″ 提交于 2020-12-13 03:28:55
问题 This question already has answers here : Why aren't my absolutely/fixed-positioned elements located where I expect? (3 answers) Closed 17 days ago . I have this container with some text and an image inside it as last element, I am trying to set an ::after to my container, however it is being shown over the image and not as the last element of the container: I understand that I can't set a pseudo-selector to an <img/> , but here I am setting ::after to the container and I don't get why it isn

Why is '::after' pseudo-selector over the image and not under it? [duplicate]

由 时光总嘲笑我的痴心妄想 提交于 2020-12-13 03:28:18
问题 This question already has answers here : Why aren't my absolutely/fixed-positioned elements located where I expect? (3 answers) Closed 17 days ago . I have this container with some text and an image inside it as last element, I am trying to set an ::after to my container, however it is being shown over the image and not as the last element of the container: I understand that I can't set a pseudo-selector to an <img/> , but here I am setting ::after to the container and I don't get why it isn
订阅 pseudo-element