Template
Anchor link/styles.css
From Dogcraft Wiki
mNo edit summary |
(Changed float based positioning to absolute positioning (Partly done through Common.css because of extension restrictions) [1/2]) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
a > span.anchor-visible::after { | a > span.anchor-visible::after { | ||
content: '#'; | content: '#'; | ||
margin-left: calc(-1ch - .1ch); | margin-left: calc(-1ch - .1ch); | ||
padding-right: .1ch; | padding-right: .1ch; | ||
| Line 8: | Line 7: | ||
opacity: 0; | opacity: 0; | ||
transition: color .25s,opacity .25s; | transition: color .25s,opacity .25s; | ||
position: absolute; | |||
left: 0; | |||
} | } | ||
/* TemplateData does not support :has() - this rule has been implemented in Common.css for the time being */ | |||
/*:has(> a > span.anchor-visible) { | |||
position: relative; | |||
}*/ | |||
/* the margin needs to be greater inside lists so it doesn't collide with the list marker */ | /* the margin needs to be greater inside lists so it doesn't collide with the list marker */ | ||
ul a > span.anchor-visible::after { | ul a > span.anchor-visible::after { | ||
margin-left: calc(-3.4ch - .1ch); | margin-left: calc(-3.4ch - .1ch); /* 3.4ch for lists inside boxes. See page Events for reference */ | ||
} | } | ||
Latest revision as of 21:55, 27 July 2024
a > span.anchor-visible::after {
content: '#';
margin-left: calc(-1ch - .1ch);
padding-right: .1ch;
-webkit-user-select: none;
user-select: none;
opacity: 0;
transition: color .25s,opacity .25s;
position: absolute;
left: 0;
}
/* TemplateData does not support :has() - this rule has been implemented in Common.css for the time being */
/*:has(> a > span.anchor-visible) {
position: relative;
}*/
/* the margin needs to be greater inside lists so it doesn't collide with the list marker */
ul a > span.anchor-visible::after {
margin-left: calc(-3.4ch - .1ch); /* 3.4ch for lists inside boxes. See page Events for reference */
}
:hover > a > span.anchor-visible::after,
a:focus > span.anchor-visible::after {
opacity: 1;
}
/* templatestyles appears to lack :has() support at the moment
a:has(> span.anchor-visible) {
float:left;
}*/
