从打印页面中删除href而不改变样式答案

【问题标题】：Remove href from printed page without changing style从打印页面中删除href而不改变样式
【发布时间】：2015-11-11 12:09:16
【问题描述】：

我有一个问题，当我尝试打印页面时，每个链接都会在其后面获取() 之间的 URL。我在这里找到了multiple questions，并且解决方案有效。不过，除此之外，我还有另一个问题：添加解决方案后，我在print.css 中的样式似乎被忽略了。

我的 CSS

.header-breadcrumb {
    margin-top: 0 !important;
}

.nonPrint, hr, .shows-more, #videoGallery{
    display: none;
}

.single-event .container .col-md-9 {
    width: 70%;
    float: left;
}

.single-event .container .col-md-3 {
    width: 30%;
    float: left;
}

.single-calendar .table-responsive table tbody tr td {
    padding: 2px 5px;
}

.single-description {
    font-size: 10pt !important;
}

h1 {
    font-size: 12pt !important;
}

.printLogo {
    display: block !important;
    width: 200px;
    padding-left: 10px;
}

但是当我添加时

a:after {  
      display: none;
      content: "";    
}

字体大小被忽略并跳回其原始值（或者看起来如此）。我该如何解决这个问题？

在左侧，您可以看到文件应有的样子（包括右侧边栏中的链接，必须将其删除），在右侧，您会看到已删除 href 的文件，但在哪里print.css 中的所有新样式似乎都被忽略了。

【问题讨论】：

您想从印刷版的每个链接中删除( [href] )？
在我的示例中，目前只有一个，但是是的，理论上我不想显示任何链接的href。
这是您想要更改的页面，还是您为无法直接访问 css 文件的外部站点创建 print 样式表？
我也可以访问原始 CSS。
好吧，如果您想更改 css 以使每个访问者都没有这些 ()，那么您应该删除规则 a[href]:after { content: " (" attr(href) ")"; }，如果您只想更改它以使用扩展名进行打印，那么您必须确保您的自定义样式表在页面之一之后加载并添加a[href]:after { content:none; }。我用 teaterbilletter.dk 上的 stylebot 扩展对其进行了测试，效果很好。

标签： html css

【解决方案1】：

忽略我之前说的。样式的差异来自以下几点：

由于这个 CSS，侧边栏必须填充 30%：

.single-event .container .col-md-3 {
    width: 30%;
    float: left;
}

但由于它输出的 URL 在第一个 - 之前无法破坏，因此 30% 宽意味着调整字体大小（Chrome 会自动这样做）。隐藏 URL 使得实际应用我尝试通过 CSS 应用的字体大小成为可能，使所有内容都比原始文件中的更大，它实际上没有听 CSS。

面部护理

这可能对另外 2 个人将来有用，所以我将把问题留在这里。

【讨论】：