on this site, there is a line underneath "Marketing Agency Fremantle".
I have used Chrome Code Inspector but cannot find what is causing this.
I want to remove the line. Thanks.
the :after pseudo element for h2 is causing the underline.
It's this CSS rule:
body.home h2::after {
content: '';
width: 60px;
height: 1px;
background-color: #4a2e69;
position: absolute;
bottom: -5px;
margin: 0 auto;
left: 0;
right: 0;
}
You can erase it or (if you can't do that) add the following to set height to 0 and make it invisible that way:
body.home h2::after {
height: 1px !important;
}
There is :after in your h2 tag
Related
As mentioned in the title, my css ::after pseudo element isn't working. My code goes like this, have I done something wrong?
span::after {
content: '';
height: 10px;
width: 10px;
border: none;
background-color: #0000ff;
border-radius: 50%;
position: relative;
top: -10px;
left: -10px;
}
You have to add display:block; for the pseudu element to work. Also try to change your position to absolute for top and left properties.
I am trying to create a stacked box look using ::after. I created the code in a codepen (https://codepen.io/nk-creative/pen/vqvVJL), but when I place the code on the Wordpress site I am working on, I can't achieve the same stacking effect in the same order (http://aptw.nk-creative.com/)
I created the code in a codepen (https://codepen.io/nk-creative/pen/vqvVJL).
<div class="offset-boxes">
<h4>47 Locations & Personalized Plans. Meet Your New Partner.</h4>
</div>
.offset-boxes {
position: relative;
max-width: 300px;
height: 290px;
background-color: lightpink;
margin-top: 20px;
padding: 25px
}
.offset-boxes::after {
content: "";
width: 100%;
right: -40px;
top: -40px;
height: 100%;
background-color: red;
position: absolute;
z-index: -1;
}
I expected the code to look like the codepen, but the WP site does not.
It looks like your ::after pseudo element is buried. You can add this to your CSS to the parent element of .offset-boxes:
.textwidget {
position: relative;
z-index: 1;
}
I want to have some list elements that got a dynamically adjusting height via css.
For better understanding: I am inserting via ::before a number that I count via counter-increment (thats the big ones)
Problem is that nothing that I tried so far brings me even close to what i want to archive. If you change the window size everything gets shoven down...
It should look like this:
I tried:
clear: both; on every element (except the li)
height: auto; on every element
I've already read through some posts but nothing really worked for me.
Dont ask why am I trying to get it done with css... ;)
Thanks for any help!
You have an absolute positioning on your image and thumbnail wrapper which is causing huge problems, look at the adjusted CSS below:
.page-id-3606 .product_thumbnail_wrapper .product_thumbnail a img {
position: relative;
clear: both;
}
.page-id-3606 .product_thumbnail a::before {
counter-increment: section;
content: "0" counter(section) "";
font-size: 10em;
font-weight: bold;
position: relative;
/* top: 100px; */
/* left: 50%; */
line-height: 0;
height: 100px;
width: 100%;
text-align: center !important;
box-sizing: border-box !important;
text-transform: uppercase;
color: #464646;
display: block !important;
border-bottom: 3px solid #464646;
/* transform: translate(-50%, 0); */
margin: 0 !important;
z-index: 10 !important;
}
I fixed it with a little help from Rich.
the missing height and top was causing the trouble:
.page-id-3606 .product_thumbnail_wrapper::before {
content:'';
background: url('...');
height: 130% !important;
width: 100%;
position: absolute;
z-index: 1;
clear: both;
top: -65px;
}
I am working on a layout for a webshop and am experiencing a problem which seems to be very specific.
There is a dropdown navigation which is design to look kind of a tab with a box under it. The point is, that there is a 1px border line between the tab (first level Menu Item) and the box (second level items) which I can't hide.
I thought about giving the second level box a lower z-index than the first level element, but that didn't changed anything. I read a lot about z-index, how it works and how it NOT works, but nothing was about z-index within one list.
This is how it should looks like and how it really looks like: http://i.stack.imgur.com/xbQ6x.png
I created a codepen, which shows the problem very good, when hovering the first level items: http://codepen.io/anon/pen/bNqJxN
li .dropdown{
overflow: hidden;
position: relative;
display: inline;
visibility: hidden;
position: absolute;
padding:0;
margin: 0 0 0 -1px; /*Putting a negativ margin-top here puts the box OVER the parent element :-( */
background: #fff;
border: 1px solid $light-grey;
width: 280px;
height: 200px;
&.right {
right: -1px;
left: auto;
}
.dropdown-1-2 {
float: left;
width: 50%;
}
}
I usually solve this issue with z-index to have the bottom of the li to overlap the top of the dropdown.
In your case, I had to remove the * selector for the z-index which came after the li and dropdown which was resetting the z-index to 2 on everything in that navigation. Instead I created just the one stacking context (here's an article on it) for the first nav to appear above the second, and then I gave the ul position relative and the dropdown a z-index of -1 and -1px top margin to move it just behind the unpositioned li.
#mainnav {
...
ul {
#include reduced-list;
...
position: relative;
li .dropdown{
...
margin: -1px 0 0 -1px;
z-index: -1;
...
&#nav1 {
z-index: 2;
}
&#nav2 {
z-index: 1;
}
Sorry, the codepen didn't save.
You can solve it adding a pseudo element to cover the border
li:hover:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: white;
bottom: -1px;
left: 0px;
z-index: 999;
}
codepen
Thanks so much!
Both answers solved my problem like a charme!
I created a codepen with the solution here: http://codepen.io/anon/pen/NPpQOq
ul {
#include reduced-list;
position: relative; /* YEAH */
float:right;
li .dropdown{
overflow: hidden;
position: relative;
display: inline;
visibility: hidden;
position: absolute;
padding:0;
margin: -1px 0 0 -1px; /* YEAH */
z-index: -1; /* YEAH */
background: #fff;
border: 1px solid $light-grey;
width: 280px;
height: 200px;
&.right {
right: -1px;
left: auto;
}
}
Placing a nested child under a parent element seems to be possible :-)
I'm trying to fix a problem with a pseudo li element in this script:
http://jsfiddle.net/5xkrS/6/
When adding a backgroundcolor to the parent div, the connectorbars between the stepnumbers disappear. (see http://jsfiddle.net/5xkrS/7/ )
The backgroundcolor seems to overrule the pseudo li element, but not the li element. Using the following css:
/*progressbar connectors*/
#progressbar li:after {
content:"";
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
What can cause this problem and is there a way to fix this?
Here you go
http://jsfiddle.net/5xkrS/9/
#container {
width: 500px;
height: 600px;
margin: 0 auto 0 auto;
background-color: deepskyblue;
position: relative;
z-index: 1;
}
Added position relative and z-index 1 to the container. tested on FF and chrome on mac