2023111001

+ コードを開く

#page-title {
    color: #3A30A1;
}
 
.foo {
    border: solid 1px #000;
    background: #f8f8ff;
    padding: 1em;
    margin: 1em auto;
}
 
#breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    margin: -1em 0 1em;
    padding: 0 0.75em 0 0;
    font-size: .85em;
    line-height: 2;
}
#breadcrumbs :is(a, a:visited) {
    display: flex;
    position: relative;
    z-index: 2;
    margin-right: 0.75em;
    padding: 0 0.5em;
    transition: color .15s cubic-bezier(0.4, 0, 0.2, 1);
}
#breadcrumbs :is(a, a:visited)::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 100%;
    transform: skew(-25deg);
    transition: box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1), background-color .15s cubic-bezier(0.4, 0, 0.2, 1);
    background: 0 0;
    box-shadow: 0.0625rem 0.0625rem 0 0 #3A30A1, 0.25rem 0.0625rem 0 0 #fff, 0.25rem 0.0625rem 0 0 #fff, 0.3125rem 0.0625rem 0 0 #3A30A1;
}
#breadcrumbs a:is(:hover, :active) {
    color: #fff;
    text-decoration: none;
}
#breadcrumbs a:is(:hover, :active)::before {
    background-color: #3A30A1;
    box-shadow: 0 0 0 0.25rem #3A30A1, 0 0 0 0 #fff, 0 0 0 0 #fff, 0 0 0 0 #3A30A1;
}

[[div class="foo"]]
[[/div]]

align=centerを追加