I have an image and i want to make a square inside it, however it draws a rectangle.
p::after {
content: "";
background-color: red;
padding: 5px;
/*line-height: 0px;*/
}
<p>That is not a square -></p>
display:inline-block will solve the problem
p::after {
content: "";
display:inline-block;
background-color: red;
padding: 5px;
/*line-height: 0px;*/
}
<p>That is a square -></p>
Related
I am typing this code and I need to stop it at 29 while my all childs are like 100-150:
&:nth-child(1n+1)
Is there any trick to make this work?
You're looking for this function notation. Cheers
body {
counter-reset: section;
}
div {
display: inline-block;
padding: .5rem;
border: gray 1px dotted;
text-align: center;
color: #f00;
margin: .25rem;
}
div:before {
counter-increment: section;
content: counter(section);
}
div:nth-child(-n+29) {
background-color: #00f;
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
This question already has an answer here:
How to cut a circular part from an image?
(1 answer)
Closed 1 year ago.
I am trying to create image icons that have a status dot which emulates Slack member-icons (left).
How can I use CSS to add a transparent ring around the dot?
.memberIconRow {
display: flex;
.memberIconArea {
position: relative;
img {
width: 30px;
margin: 0 6px 0 0;
border-radius: 5px;
}
.statusDot {
background: #f00;
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
z-index: 2;
top: 21px;
left: 23px;
}
}
}
Some dirty trick what I think of is add border to your dot with the same background as your photo, in this case - a light yellow.
Like this -
.statusDot {
...
border:4px solid yellow; /* same color as you profile photo background */
}
In multiple background colours case, use css var() like;
:root {
--blue: #1e90ff;
}
.member-bg {
background-color: var(--blue);
}
. statusDot {
border: 4px solid var(--blue);
}
I currently have this code which turns the footer titles and subtitle white when a footer cell is hovered over, and it works:
.footer-cell {
position: relative;
display: table;
height: 160px;
&:hover .footer-title { // footer-title line
color: white;
}
&:hover .footer-subtitle { // footer-subtitle line
color: white;
}
}
Is there any way that I can combine the footer-title line and the footer-subtitle line so I dont have duplicate code? I tried this but it doesn't work:
.footer-cell {
position: relative;
display: table;
height: 160px;
&:hover .footer-title, .footer-subtitle {
color: white;
}
}
Just wrap the selectors in the :hover class:
.footer-cell {
position: relative;
display: table;
height: 160px;
&:hover{
.footer-title, .footer-subtitle {
color: white;
}
}
}
Compiles to this
Is there a simple way to reverse the colour order when hovering?
Using this trick here I have the order right > left:
&:hover,
&:hover ~ button {
color: red
}
The fiddle with the right > left: https://jsfiddle.net/celio/Lowc1ruh/
Example with the left > right: https://css-tricks.com/examples/StarRating/
It is impossible for me to use float, position: absolute; and anything that changes the right order of my current html.
Plain CSS example:
button {
margin: 0;
padding: 5px;
border: none;
background: transparent;
display: inline-block;
}
button:before {
content: "⋆";
font-size: 5rem;
line-height: 1;
}
button:hover,
button:hover ~ button {
color: red;
}
<div class="wrapper">
<button></button>
<button id="2"></button>
<button></button>
<button></button>
<button></button>
</div>
One way would be to make all the child button elements color: red; when hovering over .wrapper. Then use the sibling selector (~) to change any elements after the currently hovered element to color: black;.
You should remove any whitespace between the elements (in this case I put them into one line in the HTML) to ensure that the cursor is always hovering over a star.
Example with plain CSS:
.wrapper button {
margin: 0;
padding: 5px;
border: none;
background: transparent;
display: inline-block;
}
.wrapper button:before {
content: "⋆";
font-size: 5rem;
line-height: 1;
}
.wrapper button:hover ~ button {
color: black;
}
.wrapper:hover button {
color: red;
}
<div class="wrapper">
<button></button><button id="2"></button><button></button><button></button><button></button>
</div>
JS Fiddle using SASS
I have a document with notes that should display when the user hovers over the [note] indicator without disrupting the rest of the text. Here is my CSS:
.nb {
color: blue
}
.nb sup {
color: blue
}
.nb:hover sup {
cursor: alias
}
.nb:hover span.ft {
display: inline;
position: relative;
bottom: -30px;
padding: 2px;
background-color: white;
border: 2px solid black;
}
.ft {
display: none
}
<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>
I would like for my drop-down text to not disrupt the rest of the line it's on (or the lines below it), but I have not been successful.
.nb {
color: blue
}
.nb sup {
color: blue
}
.nb:hover sup {
cursor: alias
}
.nb:hover span.ft {
display: inline;
position: absolute;
padding: 2px;
background-color: white;
border: 2px solid black;
}
.ft {
display: none
}
<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>
.nb {
color: blue
}
.nb sup {
color: blue
}
.nb:hover sup {
cursor: alias
}
.nb:hover span.ft {
display : inline-block;
position : absolute;
color : black;
border : solid 1px black;
padding : 4px;
background-color : white;
}
.ft {
display: none
}
<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>
Use absolute CSS positioning as it will let the box behave without the others elements constraints.
.nb {
color: blue; position: relative;
}
.nb sup {
color: blue
}
.nb:hover sup {
cursor: alias
}
.nb:hover span.ft {
display: inline;
position:absolute;
bottom: -30px;
padding: 2px;
background-color: white;
border: 2px solid black;
}
.ft {
display: none; width:190px;
}
<span class='sentence'>This is a lovely sentence about nothing at all<span class='nb'><sup>[a]</sup><span class='ft'>or is there more to the story?</span></span>and I like to ramble on and on, and on.</span>
<span class='sentence'>This is another nice sentence, but this one has no notes--how boring.</span>