CSS问题求助：自定义文字下划线宽度及容器定位异常

1. 自定义文字下划线宽度 #

放弃text-decoration: underline;，用伪元素实现可自定义宽度的下划线：

/* 给目标文字容器添加基础样式 */
.custom-underline {
  position: relative;
  display: inline-block; /* 让下划线范围跟随文字宽度 */
}

/* 用伪元素生成下划线 */
.custom-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; /* 调整下划线与文字的间距 */
  left: 50%; /* 让下划线居中 */
  transform: translateX(-50%);
  width: 70%; /* 自定义下划线宽度 */
  height: 2px; /* 下划线厚度 */
  background-color: #333; /* 下划线颜色 */
}

使用时给文字所在元素加上custom-underline类即可，修改width能直接调整下划线长度，去掉left和transform可让下划线左对齐。

2. 固定图片容器在屏幕右侧 #

首先给图片容器的父元素添加position: relative;，确保绝对定位的图片以父容器为基准，再调整图片容器的定位属性：

/* 图片容器的父元素必须添加 */
.parent-box {
  position: relative;
  overflow: hidden; /* 避免图片超出容器范围 */
}

/* 修改后的图片容器样式 */
.image-box {
  height: 350px;
  position: absolute;
  z-index: 1;
  right: 0; /* 固定在右侧 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%);
}

同时调整表单容器的外边距，避免内容被图片遮挡：

.form-box {
  background: #F8F8F8;
  margin-right: 320px; /* 根据图片宽度调整，留出足够空间 */
  padding: 35px;
  position: relative;
  z-index: 999;
}

这样无论在平板还是桌面浏览器端，图片都会固定在父容器右侧，不会偏移。

内容的提问来源于stack exchange，提问作者lannov