如何在宽度未知的文本右侧使用精灵?

发布于 2024-09-24 12:18:26 字数 174 浏览 1 评论 0原文

给出以下示例: http://cl.ly/2UAa

如何在“查看更多”右侧使用精灵...”行,以便它始终根据文本的宽度进行调整?我应该创建一个与文本一起浮动的单独元素,还是有办法直接在链接中执行此操作。

Given the following example:
http://cl.ly/2UAa

How do I use a sprite on the right side of the "see more..." line so that it always adjusts with the width of the text? Should I create a separate element that will float with the text, or is there a way to do it directly within the link.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

烟雨凡馨 2024-10-01 12:18:26

您可以将其应用到链接的背景,将其右对齐并为链接提供正确的填充。

a {
    background: url(image_url) no-repeat right center;
    padding-right: 80px;    // 80 pixels example
}

You can apply it to the background of the link, align it right and give the link a right padding.

a {
    background: url(image_url) no-repeat right center;
    padding-right: 80px;    // 80 pixels example
}
影子是时光的心 2024-10-01 12:18:26

我最喜欢的方法是使用伪元素并将图像设置为内容;

a:after {
    content: url(path/to/image.png);
}

您还可以在元素之前创建伪元素,或者使用文本而不是图像作为内容;

a:before {
    content:' \25BA';
}

\25BA 是右向箭头的 CSS 转义字符,但您可以将任何文本放在引号中。

当然,您也可以按照 jeroen 的建议使用后台方法,这两种方法都适用于不同的情况。

My favorite method is to use a pseudo element and set the image as content;

a:after {
    content: url(path/to/image.png);
}

You can also create a pseudo element before an element, or use text instead of an image as content;

a:before {
    content:' \25BA';
}

\25BA is the CSS escape character for a right pointing arrow, but you can put any text in quotes.

Of course, you can also use the background method as jeroen suggested, and both methods are useful for different situations.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文