<p class="titleinfo_title title_hover" data-content=" 04 喜看稻菽千重浪--記首屆國(guó)家最高科技獎(jiǎng)獲得者袁隆平 等三篇"> 04 喜看稻菽千重浪--記首屆國(guó)家最高科技獎(jiǎng)獲得者袁隆平 等三篇 </p>

強(qiáng)制多行顯示效果：

?

<style type="text/css">.title_hover:hover::after {content: attr(data-content);position: absolute;padding: 2px;border: 1px solid #93b32f;border-radius: 5px;background: #d5ddbbf5;top: 5px;left: -80px;display: inline-block;width: calc(100% + 78px);font-size: 14px;font-weight: normal;line-height: 20px;/* 添加動(dòng)畫*/animation:zoomOut 0.5s;/* 強(qiáng)制多行顯示*/height: 65px;overflow: hidden;word-wrap: break-word;word-break: break-all;white-space: normal;text-overflow: unset;}/* 設(shè)置動(dòng)畫效果*/@keyframes zoomOut{from {height:10px;}} </style>

?強(qiáng)制單行顯示效果：

?

<style type="text/css">.title_hover:hover::after {content: attr(data-content);position: absolute;padding: 2px;border: 1px solid #93b32f;border-radius: 5px;background: #d5ddbbf5;top: 5px;left: -80px;display: inline-block;width: calc(100% + 78px);font-size: 14px;font-weight: normal;line-height: 20px;/* 添加動(dòng)畫*/animation:zoomOut 0.5s;/* 強(qiáng)制單行顯示 */height: 20px;overflow: hidden;word-wrap: normal;word-break: keep-all;white-space: nowrap;text-overflow: ellipsis;}/* 設(shè)置動(dòng)畫效果*/@keyframes zoomOut{from {height:10px;}} </style>

?

總結(jié)

以上是生活随笔為你收集整理的CSS伪元素 after 实现鼠标悬浮信息及动画效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。