首页
随笔记录

分类

当前位置: 云海天教程网 > 技术新闻 > 随笔记录 >正文

下滑虚线组件封装

更新时间:2023-05-26  作者:佚名   来源: 网络转载
<template>
  <div class="comment-wrapper">
    <span class="comment-text">{{ props.text }}</span>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  text: String,
});
</script>

<style scoped>
.comment-wrapper {
  position: relative;
  display: inline-block; /* 设置为内联块级元素 */
}

.comment-text {
  margin-bottom: 5px;
  white-space: nowrap;
}

.comment-text::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px; /* 控制下划线位置 */
  left: 0;
  width: 100%; /* 下划线宽度与父元素相同 */
  height: 1px;
  border-bottom: 1px dashed #ccc;
}
</style>

下滑虚线组件封装

上一篇:[论文阅读] Diffusion Models Beat GANs on Image Synthesis 下一篇:【游记】2022 CSP-S 游寄
小编推荐
快速导航更多>>
JavaScript 教程 HTML5 教程 CSS3 教程 jQuery 教程 Vue.js 教程 Node.js 教程 SQL 教程 C 教程 PHP 教程 Linux 教程 Docker 教程 Nginx 教程 Python 教程 Java 教程

云海天教程网 版权所有

 陕公网安备 61050202000585号

陕ICP备14013131号-3