::before可点击图标

huangapple
go评论63阅读模式
英文:

::before clickable icon

问题

我正在尝试使代码中的链接图标可点击，以便用户可以在卡片的任何位置单击以转到另一个页面。我尝试过 ("attr(href)") 但是这会将URL文本添加到图标旁边，这不是我想要的。这是否可能？我阅读的其他帖子提到这是一个错误。那现在还是这样吗？

<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>
英文:

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?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

: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&gt;p:last-of-type {
    margin-bottom: 1rem;
}

.card&gt;p:last-of-type.card__title {
    margin: 0;
}

.card__image {
    background-color: #fefefe;
}

.card__image&gt;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&gt;div {
    flex-grow: 1;
}

.card__content&gt;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&gt;.button {
    margin: 0 0.25rem;
}

.card.--linked&gt;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: &quot;F517&quot;;
        background-color: #492365;
        color: #fafafa;
        font-family: &quot;foundation-icons&quot;;
        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: &quot;F517&quot;;
        background-color: #492365;
        color: #fafafa;
        font-family: &quot;foundation-icons&quot;;
        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;
    }
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;card --linked&quot;&gt;
    &lt;a href=&quot;https://stackoverflow.com/&quot;&gt;
      &lt;h2 class=&quot;card__title&quot;&gt;title&lt;/h2&gt;
      &lt;div class=&quot;card__content&quot;&gt;
        &lt;p&gt;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?&lt;/p&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

以下是您要翻译的内容：

"card --linked" 类别应该分配给 "<a>" 元素（深层次的一个级别）才能正常工作：

&lt;div class=&quot;container&quot;&gt;
  &lt;div&gt;
    &lt;a href=&quot;https://stackoverflow.com/&quot; class=&quot;card --linked&quot; data-pseudo-text=&quot;link&quot;&gt;
      &lt;h2 class=&quot;card__title&quot;&gt;title&lt;/h2&gt;
      &lt;div class=&quot;card__content&quot;&gt;
        &lt;p&gt;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?&lt;/p&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

当然，您还需要在同一个 "<a>" 元素中定义 "data-pseudo-text" 属性：

&lt;a href=&quot;https://stackoverflow.com/&quot; class=&quot;card --linked&quot; data-pseudo-text=&quot;this is your pseudo text&quot;&gt;
  &lt;h2 class=&quot;card__title&quot;&gt;title&lt;/h2&gt;
  &lt;div class=&quot;card__content&quot;&gt;
    &lt;p&gt;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?&lt;/p&gt;
  &lt;/div&gt;
&lt;/a&gt;

请注意，这是您提供的代码的中文翻译部分，其他部分未翻译。

英文:

It will work if you assign the classes card --linked to the &lt;a&gt; element (one level deeper):

&lt;div class=&quot;container&quot;&gt;
  &lt;div&gt;
    &lt;a href=&quot;https://stackoverflow.com/&quot; class=&quot;card --linked&quot; data-pseudo-text=&quot;link&quot;&gt;
      &lt;h2 class=&quot;card__title&quot;&gt;title&lt;/h2&gt;
      &lt;div class=&quot;card__content&quot;&gt;
        &lt;p&gt;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?&lt;/p&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

And, of course, it would help if you also defined the data-pseudo-text attribute in the same &lt;a&gt; element:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

: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&gt;p:last-of-type {
    margin-bottom: 1rem;
}

.card&gt;p:last-of-type.card__title {
    margin: 0;
}

.card__image {
    background-color: #fefefe;
}

.card__image&gt;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&gt;div {
    flex-grow: 1;
}

.card__content&gt;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&gt;.button {
    margin: 0 0.25rem;
}

.card.--linked&gt;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: &quot;F517&quot;;
        background-color: #492365;
        color: #fafafa;
        font-family: &quot;foundation-icons&quot;;
        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: &quot;F517&quot;;
        background-color: #492365;
        color: #fafafa;
        font-family: &quot;foundation-icons&quot;;
        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 { text-decoration:none; }
.card.--linked::before {
    content: attr(data-pseudo-text);
    background-color: red;
}

@mmedia only screen and (min-width: 64em) {
    .card.--linked.--pseudo-none::before {
        display: none;
    }
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;div&gt;
    &lt;a href=&quot;https://stackoverflow.com/&quot; class=&quot;card --linked&quot; data-pseudo-text=&quot;this is your pseudo text&quot;&gt;
      &lt;h2 class=&quot;card__title&quot;&gt;title&lt;/h2&gt;
      &lt;div class=&quot;card__content&quot;&gt;
        &lt;p&gt;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?&lt;/p&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

&lt;!-- 开始代码段: js 隐藏: false 控制台: true Babel: false --&gt;

&lt;!-- 语言: lang-html --&gt;

&lt;div class="container"&gt;
&lt;a href="https://stackoverflow.com/"&gt;
  &lt;div class="card --linked"&gt;
      &lt;h2 class="card__title"&gt;标题&lt;/h2&gt;
      &lt;div class="card__content"&gt;
        &lt;p&gt;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?&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
 &lt;/a&gt;
&lt;/div&gt;

&lt;!-- 结束代码段 --&gt;

&lt;/a&gt;
&lt;/div&gt;

&lt;a&gt;...&lt;/a&gt; 标签必须位于元素代码之外，以使元素连接到您想要使用的链接
英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
&lt;a href=&quot;https://stackoverflow.com/&quot;&gt;
  &lt;div class=&quot;card --linked&quot;&gt;
      &lt;h2 class=&quot;card__title&quot;&gt;title&lt;/h2&gt;
      &lt;div class=&quot;card__content&quot;&gt;
        &lt;p&gt;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?&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
 &lt;/a&gt;
&lt;/div&gt;

<!-- end snippet -->

</a>
</div>

The <a>....</a> tag has to be outside the element code in order to make the element attached to the link you want to use

huangapple
  • 本文由 发表于 2023年7月18日 01:23:58
  • 转载请务必保留本文链接：https://go.coder-hub.com/76706783.html
  • css
  • html
  • pseudo-element
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定