Can I hide certain HTML things using pure CSS?
I have HTML code that looks like this:
<address>telephone no <span>-</span> Some Street 2 <span>-</span> 9999 ZZ Place <span>-</span> Something else</address>
This bit of code is on a responsive website and in a very small viewport I want to set
Some Street 2 <span>-</span> 9999 ZZ Place <span>-</span>
to
display: none;
which would then leave only "Phone no - Something else".
Can I do this using pure CSS without touching / customizing the HTML? I know I can just put a div with a class around the bit that I want to hide in a small viewport, but for some reason I really wouldn't want to.
Thanks in advance for your help!
source to share
Just use the parent pseudo element :after
to display the text you want.
@media (max-width: 920px) { /* <--- desired sceensize to change address */
address {
display: none;
}
div:after {
content: 'telephone no - Some Street';
font-style: italic;
}
}
<div>
<address>telephone no <span>-</span> Some Street 2 <span>-</span> 9999 ZZ Place <span>-</span> Something else</address>
</div>
source to share
I came up with this. However, it suffers from a problem: I'm not sure how to position the last line directly to the right of the first, so I had to hardcode the width of the first (by 7em).
If anyone can come up with a better idea, I'm interested to hear about it.
@media (max-width: 30em) {
address {
height: 1.25em;
line-height: 1.25;
overflow: hidden;
padding-left: 7em;
text-indent: -7em;
}
address span {
display: block;
}
address span:nth-child(2) {
margin-top: -7.5em;
}
}
<address>telephone no <span>-</span> Some Street 2 <span>-</span> 9999 ZZ Place <span>-</span> Something else</address>
source to share
something like that?
@media screen and (max-width: 500px) {
address {
position: absolute;
width: 0;
height: 0;
font-size: 0;
z-index: -999;
}
address:after {
position: static;
content: 'telephone no';
display: block;
width: 100px
height: auto;
font-size: 14px;
white-space: nowrap;
}
}
although the answer has already been chosen, I like to explode more on this topic in person. In case anyone is interested, here's no: after a pseudo-class way to do it
@media screen and (max-width: 800px) {
address {
width: 82px;
height: 20px;
overflow: hidden;
background-color: salmon;
}
}
source to share