That's essentially how these are usually done, but you can simplify it a bit. For a start, there should be no need for z-index. I've never had to use it in this application. There's also no need to rotate the pseudo.
The easiest way of doing them is to set pseudo height and width to 0, then use border width to get the triangle shape you want. This also makes it easy to dial in any angle if you don't want 90 degrees. An example (not on default phpBB markup):
This is marked up as ul > li > a > span, which is my preferred way of doing it when I have a choice, but can be easily adapted to other markup.
As you can see, only the left border is coloured. That automatically gives you a triangle. The right border is set to 0 simply because there is no need for it to have any other value, and you don't want it getting in the way of other things.
The angle of the pointer is set by adjusting the proportions of the top and bottom borders relative to the left border. In this case the included angle is 117.3 degrees, just because I liked the look of it, but if you used 1.4rem (or 2.3rem) for all three you would have a 90 degree pointer.
Also, I find it's usually easier to use right positioning rather than left. It doesn't depend on the content width on the parent element, so you don't need to bother with calc(). Just forget left, set right, and you're good to go.
To get the whole thing responsive I use a few other tricks. The whole shebang (minus some superfluous eye candy) goes like this:
This skips the default phpBB restrictions on breadcrumbs link text lengths, and relies on flex-shrink, hidden overflow, and text-overflow to keep things fitting even on a phone. I hide the home page text on small screens and just leave the home icon, by using the hidden overflow on the main ul to hide the home page span from sighted users while still leaving it accessible to screen readers, but only if the home page li is not the only child. I also reduce padding on the home page anchor.
This is ok up to 170% of default text size on a 360px wide phone, with the home page icon plus three other links. I figure this is probably good enough, but you could get fancier if you want to take responsiveness further than that.
Do be aware that to keep things tidy with non-default font size set in the browser, all dimensions have to be set relative to font size. I find rem is usually the best option, with the html tag set to 62.5% (ie: 10px, to make things easy on the brain) and then body tag and other child elements get set to whatever (usually 1.4rem for posts on desktop, and 1.6rem on touchscreen).
The easiest way of doing them is to set pseudo height and width to 0, then use border width to get the triangle shape you want. This also makes it easy to dial in any angle if you don't want 90 degrees. An example (not on default phpBB markup):
Code:
.nav-breadcrumbs a::after {position: absolute;top: -.7rem;right: .3rem;width: 0;height: 0;content: '';border-style: solid;border-width: 2.3rem 0 2.3rem 1.4rem;border-color: #0000 #0000 #0000 var(--bsf-mebac);filter: drop-shadow(.2rem 0 0 #000) drop-shadow(.1rem 0 0 var(--bsf-libor));}This is marked up as ul > li > a > span, which is my preferred way of doing it when I have a choice, but can be easily adapted to other markup.
As you can see, only the left border is coloured. That automatically gives you a triangle. The right border is set to 0 simply because there is no need for it to have any other value, and you don't want it getting in the way of other things.
The angle of the pointer is set by adjusting the proportions of the top and bottom borders relative to the left border. In this case the included angle is 117.3 degrees, just because I liked the look of it, but if you used 1.4rem (or 2.3rem) for all three you would have a 90 degree pointer.
Also, I find it's usually easier to use right positioning rather than left. It doesn't depend on the content width on the parent element, so you don't need to bother with calc(). Just forget left, set right, and you're good to go.
To get the whole thing responsive I use a few other tricks. The whole shebang (minus some superfluous eye candy) goes like this:
Code:
.nav-breadcrumbs {overflow: hidden;display: flex;margin: 0;padding: 0 6px 0 0;font-size: 1.2rem;line-height: 3.2rem;}.nav-breadcrumbs li {flex: 0 0 auto;max-height: 3.2rem;white-space: nowrap;}.nav-breadcrumbs li:not(:first-child) {flex: 0 1 auto;overflow: hidden;}.nav-breadcrumbs a {box-sizing: border-box;position: relative;display: block;max-width: 100%;padding: 0 1.8rem 0 .6rem;white-space: nowrap;}.nav-breadcrumbs li:first-child a {padding-left: .8rem;}.nav-breadcrumbs a:hover,.nav-breadcrumbs a:focus {text-decoration: none;}.nav-breadcrumbs a::after {position: absolute;top: -.7rem;right: .3rem;width: 0;height: 0;content: '';border-style: solid;border-width: 2.3rem 0 2.3rem 1.4rem;border-color: #0000 #0000 #0000 var(--bsf-mebac);}.nav-breadcrumbs li:first-child i {font-size: 1.5rem;line-height: 3rem;vertical-align: top;}.nav-breadcrumbs span {display: inline-block;overflow: hidden;max-width: 100%;text-overflow: ellipsis;}This skips the default phpBB restrictions on breadcrumbs link text lengths, and relies on flex-shrink, hidden overflow, and text-overflow to keep things fitting even on a phone. I hide the home page text on small screens and just leave the home icon, by using the hidden overflow on the main ul to hide the home page span from sighted users while still leaving it accessible to screen readers, but only if the home page li is not the only child. I also reduce padding on the home page anchor.
Code:
@media (max-width: 32rem) {.nav-breadcrumbs li:first-child:not(:only-child) a {padding-left: 1.2rem;}.nav-breadcrumbs li:first-child:not(:only-child) span {position: absolute;top: 100%;}}@media (max-width: 20rem) {.nav-breadcrumbs li a,.nav-breadcrumbs li:first-child:not(:only-child) a {padding-right: 1.3rem;padding-left: .3rem;}}This is ok up to 170% of default text size on a 360px wide phone, with the home page icon plus three other links. I figure this is probably good enough, but you could get fancier if you want to take responsiveness further than that.
Do be aware that to keep things tidy with non-default font size set in the browser, all dimensions have to be set relative to font size. I find rem is usually the best option, with the html tag set to 62.5% (ie: 10px, to make things easy on the brain) and then body tag and other child elements get set to whatever (usually 1.4rem for posts on desktop, and 1.6rem on touchscreen).
Statistics: Posted by Gumboots — Fri May 24, 2024 2:29 am