Html 引导程序4：显示两行，后跟一个可读性更强的可扩展链接

我按照惊人的指南显示两行文字，并给用户一个链接“阅读更多”。 转换未按预期工作。有人能指出我做错了什么吗

#模块{
字号：1rem；
线高：1.5；
}
#模块p.collapse[aria expanded=“false”]{
显示：块；
高度：3rem！重要；
溢出：隐藏；
}
#模块p.collapse.show[aria expanded=“false”]{
高度：3rem！重要；
}
#模块a：在{
内容：“+显示更多”；
}
#模块a：未（.collapsed）：之后{
内容：“-显示较少”；
}

培根Ipsum

培根ipsum dolor amet doner picanha三尖比尔通香肠肉丸舌菲力牛排landjaeger尾。Kielbasa salami嫩腰肉picanha排骨，牛肉排骨，牛排干牛。猪排、鸡肉、火腿、牛排、火鸡干。肩
牛肉卷，舌尾香肠，短排骨，安杜叶。臀部法兰克福兰杰格t形骨，基尔巴萨多纳火腿飞节山鹿肉。Cupim capicola kielbasa t形骨、球头鸡、鹿肉、猪排、腌肉、牛排、凯文·尚克尔。
短腰肉leberkas嫩腰肉磨圆小腿，胸脯牛排火腿飞节火腿。

您的代码可能在引导程序3中工作。但是，由于您使用的是Bootstrap4，请尝试下面的方法

替换这个

#module p.collapse[aria-expanded="false"] {
  display: block;
  height: 3rem !important;
  overflow: hidden;
}

#module p.collapse.show[aria-expanded="false"] {
  height: 3rem !important;
}

用这个

#module #collapseExample.collapse:not(.show) {
  display: block;
  height: 3rem;
  overflow: hidden;
}

#module #collapseExample.collapsing {
  height: 3rem;
}

---

还想提醒您，

：：after

是一个伪元素，因此使用双冒号符号使用它

我正在考虑这个解决方案，但是它使用

#collapseExample

更改您的url，这对我不起作用。