下滑虚线组件封装

<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>