This question already has answers here:
Setting the width of inline elements
(7 answers)
Closed 2 years ago.
I am currently practicing CSS by following along with a Youtube tutorial by freecodecamp.org
My code is as follows:
p::before{
content: "hello ";
color: white;
font-size: 60px;
background: salmon;
margin-bottom: 20px;
}
p::after{
display: block;
content: "";
height: 100px;
width: 100px;
background: green;
}
<p>Before and after pseudo elements</p>
Now when I specify display: block in the p:: after pseudo-selector I am getting the expected output as follows
but when I omit the display: block property, the green box just disappears as below:
Does someone have an appropriate explanation for why this happens? What I was expecting was that the box will still be shown inline after the 'hello before and after pseudo-elements' but it is disappearing altogether...
Thanks in Advance for the help.
Kind Regards,
Sohaib
Then use display: inline-block
Elements with display: inline can't have explicit dimensions set on them - it will have no effect. And so, because the pseudo element has no non-empty content, it will appear with 0 dimensions and thus invisible.
Add display: inline-block; to your CSS
p::before{
content: "hello ";
color: white;
font-size: 60px;
background: salmon;
margin-bottom: 20px;
}
p::after{
display: inline-block;
content: "";
height: 100px;
width: 100px;
background: green;
}
<p>Before and after pseudo elements</p>
Related
This question already has answers here:
Vertically-aligned inline-block element not perfectly centered within container
(2 answers)
Closed 1 year ago.
the img cannot be centered vertically when i use vertical-align, I really dont understand why.
h1 {
position: relative;
line-height: 50px;
background: blanchedalmond;
}
h1::before {
content: '';
position: absolute;
top: 50%;
width: 100%;
border-top: 1px solid green;
}
img {
width: 30px;
height: 30px;
vertical-align: middle;
}
<h1>
<img src="https://img01.yzcdn.cn/vant/cat.jpeg" />
vertical-align middle
</h1>
First, you don't have vertical align middle applied. You have posted it as text in your HTML but as such, it also only works as text but not as a code command.
Then, vertical-align: center; only works in combination with tables or table-cells. So you would need to apply: display: table-cell;. However, the more modern solution would be flexbox. Use: h1 { display: flex; align-items: center; } and the image will be vertically centered within the <h1> tag.
Then you have 2 issues:
The critical issue: <h1><div></div></h1> is an invalid HTML markup that will neither pass the W3C nor the WHATWG markup check. A <div> cannot be a child within a header tag.
The minor issue is with the <img /> tag. Since HTML5 the image tag is an empty tag. Means it does not have a closing tag nor does it have a slash at the end. It's simply written <img>. Only a few frameworks/libraries still use the slash.
h1 {
position: relative;
line-height: 50px;
background: blanchedalmond;
display: flex;
align-items: center;
}
.line {
position: absolute;
top: 50%;
width: 100%;
border-top: 1px solid green;
}
img {
width: 30px;
height: 30px;
}
<h1>
<div class="line"></div>
<img src="https://img01.yzcdn.cn/vant/cat.jpeg" />
vertical-align middle
</h1>
This question already has answers here:
Padding for Inline Elements
(3 answers)
Closed 4 years ago.
I have a link that looks like a button and I would like to set the background colour to be different.
However, I don't understand why my holder div does not take the same height as it's child. I doesn't take into consideration padding.
Is there a clean way to fix this?
.link {
background-color: green;
padding: .9rem 3rem;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
You need to add display: inline-block to your .link element:
.link {
background-color: green;
padding: .9rem 3rem;
display: inline-block;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
By default, <a> elements are display: inline, and do not have their layout impacted by the containing block. That is to say, they do not allow for a height or width to be set, and do not respect vertical padding and margins.
The <a> tag default display is inline, so its parent will display it vertically along its line box (based on the vertical-align property), you need to change it to display: block or inline-block, depending on what you’re looking for;
.link {
display: block;
background-color: green;
padding: .9rem 3rem;
}
.holder {
background-color: red;
text-align: center;
margin-top: 40px;
}
<div class="holder">
LINK
</div>
Because by default a tag will have the property of display: inline; so make sure to change the anchor tag to display: inline-block; or display: block;
This question already has answers here:
How can I make a fieldset legend-style "background line" on heading text?
(9 answers)
Closed 5 years ago.
I have h3 and would like to have a line before/left and after/right DAY-BY-DAY word, but can only achieve line on the top and at the bottom of that word with ::after and ::before. How can I achieve this with flex, please help.
Something like ----DAY-BY-DAY----
Here is html:
<h3 id ="daybyday"><span style="font-style: italic; font-size: 23px; color: #7B7B7A;">DAY-BY-DAY</span><`/h3>`
Here is CSS:
#daybyday::before {
content: "";
display: block;
background: salmon;
height: 5px;
}
#daybyday::after {
content: "";
display: block;
background: salmon;
height: 5px;
}
Do you want something like this?
So what we do here is, we create a div with color: salmon and height of 5px, then we set the flex property for the element using display:flex, by using flex property (align-items:center -> for vertical centering and justify-content:center -> for horizontal centering, we can get the h3 element in the center of the line, finally to prevent the div which is behind the h3 element from being visible, I set the background-color:white, so that it is not visible!
#daybyday {
display: inline;
background-color:white;
}
.text-special {
font-style: italic;
font-size: 23px;
color: #7B7B7A;
}
.line {
background-color: salmon;
height: 5px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
<div class="line">
<h3 id="daybyday"><span class="text-special">DAY-BY-DAY</span></h3>
<div>
What I try to create is a simple line that will go after the text vertically centered. So far, I've come up with the following solution:
<h1>lorem ipsum <span></span></h1>
h1 > span {
display: inline-block;
height: 1px; width: 50px;
margin-bottom: .2em;
background-color: black;
}
https://jsfiddle.net/7xqp7m2h/
The bad thing about this approach (not to mention that the line is not 100% vertically centered) is that this is a too compilcated solution for such an easy task.
What I thought about is maybe to add a line-through an invisible text within the span:
h1 > span {
text-decoration: line-through;
}
However, I failed to make it work.
Any ideas on how to make a visible line-through with hidden text, or maybe another solution that would be simplier than what I have now?
No need for a span at all.
A pseudo-element and flexbox can do that.
JSFiddle Demo
h1::after {
content: '';
height: 1px;
background: red;
flex: 1;
margin-left: .25em;
}
h1 {
display: flex;
align-items: center;
}
<h1>lorem ipsum</h1>
Flex can easily help you (set a width if you wish to h1 or pseudo ).
the use of a pseudo avoids the extra span in the HTML, you can apply it to any title level .
h1 {
display: flex;
background: gray;
}
h1:after {
content: '';
border-top: 1px solid;
flex: 1;
margin: auto 0.5em;
}
<h1>lorem ipsum </h1>
https://jsfiddle.net/7xqp7m2h/4/
https://jsfiddle.net/9crkt4hn/
Using as text in the span will make a space without seeing it as a space :P
As you see in the fiddle you see it works without problems.
I want to add a vertical line between the green blocks in the following image. I am using :after to do that. However I do not want to display the line after the last block. Is there any trick to do that?
CSS:
.block{
width: 20px;
height: 20px;
margin-right: 20px;
background: green;
float: left;
}
.block:after {
content: '';
width: 0;
height: 100%;
position: absolute;
border: 1px solid black;
top: 0;
left: 10px;
}
Demo:
http://jsfiddle.net/rhwb7b2o/
Note: The height of the list items varies. HTML markup can be changed if required.
Add position:relative to the li elements so that each line does not cover the whole ul.
Then add li:last-child .block{position:relative;overflow:hidden;} to handle the last element.
Demo at http://jsfiddle.net/gaby/qj2dbdkz/
Use the :not selector with the :last-child selector. Like this:
.block:not(:last-child):after { /* ... */ }