I’m trying to make the link icon in my code clickable so that the user can click anywhere in the card to go to another page. I’ve tried (" attr(href) ") but that added the URL text next to the icon which I don’t want. Is this something that is possible? Other posts I’ve read mentioned it was a bug. Is that still the case?
:root {
--secondary-color: #4b4945;
--light-text-color: #fafafa;
--dark-text-color: #37332f;
--norm-text-color: #4b4945;
--bg-med: #efefef;
--primary-color: #492365;
--primary-header: #492365;
--solid-button-text: #fafafa;
--solid-button-text-hover: #120919;
--hollow-button-text: #120919;
--primary-lighter-1: #5b3974;
--primary-lighter-2: #6a4b81;
--primary-lighter-3: #a491b2;
--primary-lighter-4: #d2c8d9;
--primary-lighter-5: #e4dee8;
--primary-lighter-6: #ede9f0;
--primary-darker-1: #42205b;
--primary-darker-2: #371a4c;
--primary-darker-3: #251233;
--primary-darker-4: #120919;
--hover-shadow: 0px 0px 5px 0px #492365;
--border-color: #492365;
--banner-overlay: rgba(73, 35, 101, 0.65);
--inset-shadow: none;
--outset-shadow: none;
--flat-border: 2px solid;
}
.container {
max-width: 80rem;
padding: 1rem;
margin: 0 auto;
position: relative;
width: 100%;
}
.card {
border: 2px solid;
border-color: #492365;
background-color: #492365;
box-shadow: none;
border: var(--flat-border);
border-color: var(--border-color);
box-shadow: var(--outset-shadow);
background-color: var(--primary-color);
display: flex;
position: relative;
flex-flow: column nowrap;
margin: 0;
}
.card>p:last-of-type {
margin-bottom: 1rem;
}
.card>p:last-of-type.card__title {
margin: 0;
}
.card__image {
background-color: #fefefe;
}
.card__image>img {
width: 100%;
}
.card__image.--icon {
background-color: #492365;
background-color: var(--primary-color);
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
padding: 1rem;
}
.card__content {
flex-grow: 1;
padding: 0.5rem 1rem;
display: flex;
flex-flow: column nowrap;
position: relative;
background-color: #fefefe;
word-break: break-word;
}
.card__content>div {
flex-grow: 1;
}
.card__content>p:last-child {
margin-bottom: 0;
}
.card__title {
background-color: #492365 !important;
color: #fafafa !important;
padding: 0.5rem 1rem !important;
background-color: var(--primary-color) !important;
color: var(--solid-button-text) !important;
margin: 0 !important;
}
.card__buttons {
background: #fefefe;
padding: 0.5rem 1rem;
position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
.card__buttons>.button {
margin: 0 0.25rem;
}
.card.--linked>a {
text-decoration: none;
color: inherit;
height: 100%;
display: flex;
position: relative;
flex-flow: column nowrap;
}
.card.--linked:hover,
.card.--linked:focus-within {
transition: transform 0.05s ease-in-out;
transform: scale(1.01, 1.01);
box-shadow: 0px 0px 5px 0px rgba(73, 35, 101, 0.9);
box-shadow: var(--hover-shadow);
}
@media only screen and (hover: none) {
.card.--linked::before {
content: "1F517";
background-color: #492365;
color: #fafafa;
font-family: "foundation-icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
background-color: var(--primary-color);
color: var(--solid-button-text);
position: absolute;
padding: 0.2rem 0.5rem;
opacity: 0.9;
text-align: center;
top: 0;
right: 0;
margin-left: -5rem;
border-bottom-right-radius: 0;
border-bottom-left-radius: 10px;
z-index: 1;
}
}
@media only screen and (min-width: 0em) {
.card.--linked::before {
content: "1F517";
background-color: #492365;
color: #fafafa;
font-family: "foundation-icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
background-color: var(--primary-color);
color: var(--solid-button-text);
position: absolute;
padding: 0.2rem 0.5rem;
opacity: 0.9;
text-align: center;
top: 0;
right: 0;
margin-left: -5rem;
border-bottom-right-radius: 0;
border-bottom-left-radius: 10px;
z-index: 1;
}
}
.card.--linked[data-pseudo-text]::before {
content: attr(data-pseudo-text);
}
@media only screen and (min-width: 64em) {
.card.--linked.--pseudo-none::before {
display: none;
}
}<div class="container">
<div class="card --linked">
<a href="https://stackoverflow.com/">
<h2 class="card__title">title</h2>
<div class="card__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quasi aut deleniti, nisi quo cum, repellendus eius sint consectetur exercitationem aliquid eveniet, eligendi natus neque distinctio omnis consequatur a hic?</p>
</div>
</a>
</div>
</div>
2
Answers
It will work if you assign the classes
card --linkedto the<a>element (one level deeper):And, of course, it would help if you also defined the
data-pseudo-textattribute in the same<a>element:The …. tag has to be outside the element code in order to make the element attached to the link you want to use