I am trying to target a pseudo element I am using to change the width of a border.
I am trying to get rid of the top border (first-child)
But its not working. Is this how you target a pseudo element?
<div class="landingHeaderNav">
Click here
Click here
Click here
</div>
.landingHeaderNav a {
color: #000;
display: block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
::before {
content: "";
display: block;
margin: 0 auto;
width: 5%;
border-top: 1px solid #000;
}
:first-child {
::before {
border-top:none;
}
Here is the pen: https://codepen.io/tysonmaynes/pen/JeVrLr
In css you have to use as below set the element before pseudo as .landingHeaderNav a:before:
.landingHeaderNav a {
color: #000;
display: block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
.landingHeaderNav a:before {
content: "";
display: block;
margin: 0 auto;
width: 5%;
border-top: 1px solid #000;
}
.landingHeaderNav a:first-child::before {
border-top:none;
}
<div class="landingHeaderNav">
Click here
Click here
Click here
</div>
In sass or scss use:
.landingHeaderNav a {
color: #000;
display: block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
&:before {
content: "";
display: block;
margin: 0 auto;
width: 5%;
border-top: 1px solid #000;
}
&:first-child::before {
border-top:none;
}
}
Alternatively, you can use the negation pseudo-class
.landingHeaderNav a {
color: #000;
display: block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
.landingHeaderNav a:not(:first-child)::before {
content: "";
display: block;
margin: 0 auto;
width: 5%;
border-top: 1px solid #000;
}
<div class="landingHeaderNav">
Click here
Click here
Click here
</div>
Related
There is initial space before the list. And the list is scrollable.
The space from the beginning needs to be removed while scrolling. Is it possible to do so using css?
I initially added padding before the list. But the padding is always maintaining it's space.
JSX:
<div class="pt-filter-container">
<div
v-for="(item, index) in items"
:key="index"
class="item"
>
{{ item.label }}
</div>
</div>
CSS:
.filter-container {
display: flex;
width: 30em;
overflow-x: auto;
white-space: nowrap;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.item {
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
line-height: 16px;
color: #5A6872;
margin-right: 8px;
padding: 8px 12px;
border: 1px solid #chip-grey;
border-radius: 4px;
background-color: #FAFAFA;
position: relative;
}
.active {
background-color: #red;
color: #white;
}
}
It's just i need to add margin before the 1st element instead of container that is containing it.
So the actual code will be -
.pt-filter-container {
display: flex;
width: 30em;
overflow-x: auto;
white-space: nowrap;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
.pt-item {
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
line-height: 16px;
color: #5A6872;
margin-right: 8px;
padding: 8px 12px;
border: 1px solid #pt-chip-grey;
border-radius: 4px;
background-color: #FAFAFA;
position: relative;
&:first-child {
margin-left: 18px;
}
}
.active {
background-color: #pt-red;
color: #pt-white;
}
}
I don't know the exact dom and css structure of your project. But can't you use something like this?
overflow-x: hidden
or
ul > li: first-child {
padding-left: 0;
}
Currently there are no options in the theme to align TABS centered. I tried to play with the CSS in the stylesheet (style.css), but with no luck.
how can I make the tabs center aligned?
/* tab */
.tab-set {
margin-bottom: 50px;
}
.tab-set ul.tabs-titles {
padding: 0;
height: 32px;
margin: 0;
clear: right;
}
.tab-set .tabs-titles li {
padding: 15px 35px;
color: #fff;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
border-right: 1px solid #f6f6f6;
float: left;
list-style-type: none;
cursor: pointer;
}
.tab-set .tabs-titles li:last-child {
border-right: none;
}
.tab-set .tabs-titles li.current {
padding: 15px 35px;
position: relative;
top: 1px;
color: #575a5c;
background: #f6f6f6;
}
.tab-set .tab-content {
padding: 20px 20px 10px;
background-color: #f6f6f6;
clear: both;
}
.tab-content p {
padding: 0;
}
.tab-set.white .tabs-titles li {
border-right: 1px solid #fff;
}
.tab-set.white .tabs-titles li.current {
background: #fff;
}
.tab-set.white .tab-content {
background-color: #fff;
}
It's a bit hard to guess the issue since there's no html to make sure the structure is correct. For sake of cleaner code, I'd do this and update the following:
.tab-set ul.tabs-titles {
padding: 0;
margin: 0;
width: 100%;
display: inline-block;
text-align: center;
}
.tab-set .tabs-titles li {
padding: 15px 35px;
color: #fff;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
border-right: 1px solid #f6f6f6;
display: inline-block;
}
.tab-set .tabs-titles li.current {
color: #575a5c;
background: #f6f6f6;
}
Try not ever set a fixed height unless needed because that's how items can look all messy. Have the padding/line-height dictate the height. I also removed some duplicates. For example, applying the same padding to .current was just doing the same thing. Hope this helps.
EDIT:
Here's my codepen to see it in action: https://codepen.io/thecenteno/pen/LYYgMpv
How change text when I push cursor in button? If I push cursor in button with price, will show text: "Add to basket".
This is Code:
body {
font-family: 'Roboto', sans-serif;
}
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<div class="price">$50</div>
<div class="info">Add to basket</div>
How solve this problem?
You can use a wrapper div to catch the over, I think is more maintainable if you change the html in the future:
body {
font-family: 'Roboto', sans-serif;
}
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
width: 20%;
margin: 20px auto;
cursor: pointer;
}
.wrapper:hover .info {
display: block;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<div class="wrapper">
<div class="price">$50</div>
<div class="info">Add to basket</div>
</div>
you can use :active to show text when mouse is clicking down on the price like so:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
.price:active + .info {
display: block;
}
<div class="price">$50</div>
<div class="info">Add to basket</div>
if you are trying to show the text on :hover like the title of the question says the unser :hover like so:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
.price:hover + .info {
display: block;
}
<div class="price">$50</div>
<div class="info">Add to basket</div>
Update 3:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info,
.price:hover .amount {
display: none;
}
.price:hover .info {
display: block;
}
<div class="price">
<div class="amount">$50</div>
<div class="info">Add to basket</div>
</div>
I'm currently learning css and attempting to center the code found here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
I've tried a combination of inline-block and text-align: center, but am unable to center it so "Home", "News", "Dropdown", and "Link" are centered instead of floating towards the left.
Could someone explain what I'm doing wrong? Thank you and hopefully you had a restful weekend!
Since Elements have a float:left property you cannot center them, need to change the css as per needs
Try this new CSS
CSS
.container {
overflow: hidden;
background-color: #333;
font-family: Arial;
text-align:center;
}
.container a {
display:inline-block;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display:inline-block;
overflow: hidden;
vertical-align:middle;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
nav.page-nav {
background-color: #1d1d1d;
line-height: 6rem;
font-size: 1.7rem;
}
nav.page-nav .container {
display: -ms-flexbox;
}
nav.page-nav a {
display: block;
width: 9rem;
padding: 0 1.8rem;
border-right: 1px dotted #3d3d3d;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: #c3c3c3;
text-shadow: 0 1px 0 #000;
}
nav.page-nav a:first-child {
border-left-width: 1px;
border-left-color: #3d3d3d;
}
nav.page-nav a:hover {
color: #e4e4e4;
background-color: black;
}
nav.page-nav .active {
color: white;
background: -ms-linear-gradient(#c95656, #8d0606);
background: linear-gradient(#c95656, #8d0606);
}
nav.page-nav .active:hover {
color: #fff;
}
nav.page-nav .active:before {
position: absolute;
top: 6rem;
display: block;
height: 0;
width: 0;
margin-left: -1.9rem;
border-top: 2rem solid #8d0606;
border-right: 6.5rem solid transparent;
content: "";
}
nav.page-nav .active:after {
position: absolute;
display: block;
height: 0;
width: 0;
margin-left: 4.3rem;
border-top: 2rem solid #8d0606;
border-left: 6.5rem solid transparent;
content: "";
}
<nav class="page-nav">
<div class="container">
Home
About
Schedule
Register
</div>
</nav>
I am confused with the display: block in the nav.page-nav a selector. If I change it to display: inline-block nothing change. Why?
I am also confused with the :before and :after. How do they work in the above code? I mean before supposed to be before the element no bellow it. They are shown bellow each active element.
The most common difference between display:block and inline-block is there alignment.
Display:Block by default takes full width and assigned height to there elements. Placement of display:block elements are one after another, whereas to align them in one line i.e. horizontally we need to use float:left, but display:inline-block elements are by default align in inline no need to used float:left.
Pseudo ::before - is used to assign some content or some style properties before the targeted element, but as you have assigned top:6rem to nav.page-nav .active:before so your before element is at bottom of target element.
Pseudo ::after - is used to assign some content or some style properties after the targeted element.
nav.page-nav {
background-color: #1d1d1d;
line-height: 6rem;
font-size: 1.7rem;
}
/* TODO: nav.page-nav .container */
nav.page-nav .container {
display: -ms-flexbox;
}
/* TODO: nav.page-nav a */
nav.page-nav a {
display: block;
width: 9rem;
padding: 0 1.8rem;
border-right: 1px dotted #3d3d3d;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: #c3c3c3;
text-shadow: 0 1px 0 #000;
position:relative;
}
/* TODO: nav.page-nav a:first-child */
nav.page-nav a:first-child {
border-left-width: 1px;
border-left-color: #3d3d3d;
}
/* TODO: nav.page-nav a:hover */
nav.page-nav a:hover {
color: #e4e4e4;
background-color: black;
}
/* TODO: nav.page-nav .active */
nav.page-nav .active {
color: white;
background: -ms-linear-gradient(#c95656, #8d0606);
background: linear-gradient(#c95656, #8d0606);
}
/* TODO: nav.page-nav .active:hover */
nav.page-nav .active:hover {
color: #fff;
}
/* TODO: nav.page-nav .active:before */
nav.page-nav .active:before {
position: absolute;
top:6rem;
left:0;
display: block;
height: 0;
width: 0;
border-top: 2rem solid #8d0606;
border-right: 6.5rem solid transparent;
content: "";
}
/* TODO: nav.page-nav .active:after */
nav.page-nav .active:after {
position: absolute;
display: block;
height: 0;
width: 0;
border-top: 2rem solid #8d0606;
border-left: 6.5rem solid transparent;
content: "";
bottom:-2rem;
right:0;
}
<nav class="page-nav">
<div class="container">
Home
About
Schedule
Register
</div>
</nav>