pseudo-element

Full width background element with pseudo-class - z-index?

落爺英雄遲暮 提交于 2020-03-06 04:36:10
问题 EDIT: I found out that when I delete the z-index of the parent element it works. Anyway ... is there a less "hackish" way to accomplish all that? It works but really feels very hackish. I try to make a full width pseudo element behind a centered 50% row. It works fine (code looks very hackish, though) but I can't get the pseudo elements z-index behind its parent: > Visit codepen-battleground here. This is the SCSS code: html, body { height: 100%; margin: 0; overflow-x: hidden; overflow-y:

How to test css properties of pseudo elements in Nightwatch

这一生的挚爱 提交于 2020-03-03 04:59:45
问题 I want to test the background image is correct on my website using Nightwatch, but its set to be the background of a ::before pseudo element, here is the CSS .icon-circle-delete:before { content: ''; background: url(images/svg/delete.svg) no-repeat 50% 50%; display: inline-block; width: 16px; height: 16px; I've tried the following: .assert.cssProperty("i.icon-circle-delete", "background", "url(clientlib-site/images/svg/delete.svg) "); .assert.cssProperty("i.icon-circle-delete:before",

CSS how to vertically align text within a pseudo element

本秂侑毒 提交于 2020-02-22 06:14:45
问题 I have created a pseudo element to sit over an unordered list, the css is as follows: .pricing-column.featured::after { content: "Most Popular"; background: #52BDE6 none repeat scroll 0% 0%; color: #FFF; width: 80px; border-radius: 100%; position: absolute; top: -10px; left: -10px; z-index: 1000; text-transform: uppercase; font-weight: 700; font-size: 0.9em; line-height: 0.9em; padding: 10px; display: inline-block; height: 80px; } However, with this, the text inside the pseudo element sits at

CSS how to vertically align text within a pseudo element

為{幸葍}努か 提交于 2020-02-22 06:11:29
问题 I have created a pseudo element to sit over an unordered list, the css is as follows: .pricing-column.featured::after { content: "Most Popular"; background: #52BDE6 none repeat scroll 0% 0%; color: #FFF; width: 80px; border-radius: 100%; position: absolute; top: -10px; left: -10px; z-index: 1000; text-transform: uppercase; font-weight: 700; font-size: 0.9em; line-height: 0.9em; padding: 10px; display: inline-block; height: 80px; } However, with this, the text inside the pseudo element sits at

CSS how to vertically align text within a pseudo element

偶尔善良 提交于 2020-02-22 06:08:32
问题 I have created a pseudo element to sit over an unordered list, the css is as follows: .pricing-column.featured::after { content: "Most Popular"; background: #52BDE6 none repeat scroll 0% 0%; color: #FFF; width: 80px; border-radius: 100%; position: absolute; top: -10px; left: -10px; z-index: 1000; text-transform: uppercase; font-weight: 700; font-size: 0.9em; line-height: 0.9em; padding: 10px; display: inline-block; height: 80px; } However, with this, the text inside the pseudo element sits at

Pseudo elements breaking justify-content: space-between in flexbox layout

徘徊边缘 提交于 2020-02-10 01:49:50
问题 I have three divs inside a parent div that are being spaced out using: display: flex; justify-content: space-between; However, the parent div has an :after on it which is making the three divs not go out to the edge of parent div. Is there a way to have flexbox ignore the :before and :after ? codepen.io .container { width: 100%; display: flex; justify-content: space-between; padding-top: 50px; background: gray; } .container div { background: red; height: 245px; width: 300px; } .container

Vertical bar for each tbody inside a table

自古美人都是妖i 提交于 2020-01-30 13:04:19
问题 I've a dynamic HTML page which has a table with multiple 'tbody' elements. Now, I'm stuck with CSS as I need to show a vertical bar inside each of the 'tbody' as shown in the image attached. How could I get this done? I tried using 'tr::after' and creating a bar, but didn't help. Here's my html: Could you please help me achieve this? <table> <tbody class="container"> <tr> <td>Row 1 Column 1</td> <td>Row 1 Column 2</td> </tr> <tr> <td>Row 2 Column 1</td> <td>Row 2 Column 2</td> </tr> <tr> <td

Vertical bar for each tbody inside a table

試著忘記壹切 提交于 2020-01-30 13:04:12
问题 I've a dynamic HTML page which has a table with multiple 'tbody' elements. Now, I'm stuck with CSS as I need to show a vertical bar inside each of the 'tbody' as shown in the image attached. How could I get this done? I tried using 'tr::after' and creating a bar, but didn't help. Here's my html: Could you please help me achieve this? <table> <tbody class="container"> <tr> <td>Row 1 Column 1</td> <td>Row 1 Column 2</td> </tr> <tr> <td>Row 2 Column 1</td> <td>Row 2 Column 2</td> </tr> <tr> <td

Is it possible to user pseudo-element (:after, :before) on table row safely?

丶灬走出姿态 提交于 2020-01-28 09:00:28
问题 I want to add absolutely positioned element as an :after (of :before ) of a table row. Look at this http://jsbin.com/IGumoye/5/edit I assume that when I add such element rendering engine (at least Webkit based) think it is a table cell of some kind. :before works badly in all browsers. But :after works very well in Firefox and almost good in webkit. In webkit it keep small space and makes whole table width bigger. - This is what bothers me in webkit. How to fix this? And where can I read

pseudo content properies varies in each browsers

廉价感情. 提交于 2020-01-25 21:17:51
问题 I am using custom CSS to style radio boxes but now the problem is that checked radio circle is appearing at diff positions in IE11, FF36 and Chrome. Below is the illustration CSS used to achieve this is as below: label { display: inline-block; cursor: pointer; position: relative; padding-left: 32px; } input[type=radio] { display: none; } label:before { content: ""; display: inline-block; width: 23px; height: 22px; margin-right: 10px; position: absolute; left: 0; border:1px solid $grey; border