pseudo-element

css3 “::after” pseudo-element not working

淺唱寂寞╮ 提交于 2019-12-02 01:32:06
I want to add a triangle after a div tag.Therefore i used css3 after pseudo-element. But it's not working. Following is my css rule. .header-wrapper .part1 ::after { width: 0; height: 0; border-left: solid 48.35px #f21e1e; border-bottom: solid 48.35px transparent; border-top: solid 48.35px transparent; } Following is my html part <div class="header-wrapper"> <div class="part1"></div> </div> In order for the pseudo element to be generated, you need to specify a content value . The value is otherwise assumed to be the default, none - which is likely why it isn't working in your case. (example)

Getting :before pseudo element to use background image of parent

ぃ、小莉子 提交于 2019-12-02 00:58:55
Can CSS be used to set the background image of a :before pseudo element to the same as it's parent. I want to say inherit, but can a pseudo element inherit anything? Example: li a { background: #f56a46 url(images/gallery-thumb.jpg) center center no-repeat; } li a:before { background: inherit; } I know I could easily do it with JavaScript but I want to know if it's possible using only CSS. Any help would be much appreciated, Thanks! Inherit must work for pseudo-elements: http://jsfiddle.net/kizu/GaUsp/ Are sure, you've added all the needed properties like content , display and dimensions so the

Odd behavior of :first-letter in Chrome

霸气de小男生 提交于 2019-12-02 00:37:12
Adding what seems to be an innocuous class to an element having a class containing :first-letter causes the first letter, under some circumstances, to be rendered incorrectly. An element originally has class "unindent", and then class "menuitemon" is added. The fiddle http://jsfiddle.net/pgf3reyt/4/ shows this working on one element, and not working on another. Works OK in Firefox. p.unindent { color: #555555; background-color: #e6e6e6; border-bottom: 1px solid #d3d3d3; border-left: 1px solid rgba(0,0,0,0); /* so things are the same size so we don't develop scroll bars*/ border-right: 1px

Seeing CSS pseudo-elements in Firebug

荒凉一梦 提交于 2019-12-01 21:37:46
问题 Is there any workaround to see CSS pseudo-elements like :after , :before , etc. (which are known as CSS3 Generated and Replaced Content Module) in Firebug? Right now, when I select an element, I only see static CSS applied to it. I don't see styles applied to it using :after and :before pseudo-elements. 回答1: You can use webkit's (chrome) developer's tool to view and modify pseudo-element's style, while you won't be able to inspect them via HTML, you can select the affected elements which

Is it possible to write one CSS rule for several prefixed selectors?

强颜欢笑 提交于 2019-12-01 20:03:36
See answer for this question . I write CSS rule: ::-webkit-input-placeholder,:-moz-placeholder,::-moz-placeholder,:-ms-input-placeholder { color: #999; } So firefox can not recognize its elements (-moz-placeholder and -moz-placeholder). Why? It is possible to write all this pseudo element in one CSS rule? Short answer: no. This behaviour is accordance with the W3C spec ( see 4.1 ). That is if any selector list contains one or more selectors that are invalid, the entire selector list is considered invalid, hence you cannot group browser-specific selectors. Warning : the equivalence is true in

Firefox not displaying properly :before and :after pseudo-elements

自作多情 提交于 2019-12-01 18:37:30
问题 On every other browser the webpage looks fine except Firefox. Even Internet Explorer! The pseudo elements float all over the document or even aren't displayed after the first ones are. Is there any solution of this behaviour? CSS span[property="dc:date dc:created"]::before{ position: absolute; top: 60px; content: ''; display: block; background-color: #005691; width: 60px; height: 20px; } span[property="dc:date dc:created"]::after{ position: absolute; top: 60px; right: 0; width: 0px; height:

Firefox not displaying properly :before and :after pseudo-elements

百般思念 提交于 2019-12-01 17:43:45
On every other browser the webpage looks fine except Firefox. Even Internet Explorer! The pseudo elements float all over the document or even aren't displayed after the first ones are. Is there any solution of this behaviour? CSS span[property="dc:date dc:created"]::before{ position: absolute; top: 60px; content: ''; display: block; background-color: #005691; width: 60px; height: 20px; } span[property="dc:date dc:created"]::after{ position: absolute; top: 60px; right: 0; width: 0px; height: 0px; border-top: 20px solid #01416F; border-right: 20px solid rgba(0, 0, 0, 0); content: ''; } http:/

Checkboxes with Font Awesome 5 icons

跟風遠走 提交于 2019-12-01 16:41:55
Did anyone already designed checkboxes with font awesome 5 icons inside? I've already googled it and found only examples for FA-4 like http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/ I updated to FA5 and got other things with CSS pseudo elements to run, but inside a checkbox it's not running. I'm open to other solutions without pseudo elements. Thanks in advance! Fiddle-Examples: Fiddle with FA-4.7 /* Checkboxes */ .checkbox input[type="checkbox"] { display: none; } .checkbox label { padding-left: 0; } .checkbox label:before { content: ""; width: 20px; height: 20px; display: inline

::first-letter pseudo-element not working in firefox

荒凉一梦 提交于 2019-12-01 11:22:48
I cannot for the life of me figure this one out. I just want to style the dollar sign to be a different color and I would like to avoid using another element around the dollar sign. <ul> <li><strong>John Dow</strong> <div>$5,849,487<sup>84</sup></div></li> <li><strong>David Jones</strong> <div>$5,498,364<sup>01</sup></div></li> <li><strong>Susie Smith</strong> <div>$5,098,276<sup>35</sup></div></li> </ul> And this CSS: li::first-letter { color: blue; } li div::first-letter { color: red; }​​ The blue works, the red does not. http://jsfiddle.net/ryanwheale/KUzUp/ It seems to be due to the $

How to create a box with a left arrow and border

…衆ロ難τιáo~ 提交于 2019-12-01 11:07:12
I'm trying to create a box with a left arrow/triangle which has a opaque border surrounding it. I'm using CSS3 in order to avoid using images. The box will contain dynamic content so the height will likely vary. In the image attached you can see my progress on the left and what I am trying to achieve on the right. Here is a JSFiddle of what I have so far. As you can see there are 2 problems: 1) Due to the opacity you can see the border surrounding the triangle overlaps the border surrounding the box. This needs to be avoided. 2) I need the arrow/triangle to be rather large, which means the