嘿，很高兴帮你解决这个问题！你已经用:before伪元素实现了右上角的Logo，这个思路很棒——用CSS伪元素不需要改动幻灯片的HTML结构，非常干净。要在左上角再加一个Logo，用:after伪元素是最直接的优化方案，下面给你详细的实现步骤：

核心实现代码 #

首先确保标题幻灯片容器设置了相对定位（让伪元素相对于它定位），然后分别用:before和:after定义左右两个Logo的样式：

/* 给标题幻灯片容器设置相对定位，作为伪元素的定位基准 */
.title-slide.remark-slide-content {
  position: relative;
}

/* 左上角Logo */
.title-slide.remark-slide-content:before {
  position: absolute;
  top: 20px;    /* 距离顶部的间距，可按需调整 */
  left: 20px;   /* 距离左侧的间距，可按需调整 */
  content: url(logo-left.svg);  /* 替换为你的左上角Logo路径 */
  height: 60px; /* Logo高度，可按需调整 */
}

/* 右上角Logo */
.title-slide.remark-slide-content:after {
  position: absolute;
  top: 20px;     /* 和左上角保持一致的顶部间距，视觉更统一 */
  right: 20px;   /* 距离右侧的间距，可按需调整 */
  content: url(logo-right.svg); /* 替换为你的右上角Logo路径 */
  height: 60px;  /* 和左上角保持一致的高度，视觉更统一 */
}

更简洁的DRY写法（可选） #

如果两个Logo的样式高度一致，还可以把公共样式抽出来，减少重复代码，让CSS更易维护：

.title-slide.remark-slide-content {
  position: relative;
}

/* 统一设置两个Logo的公共样式 */
.title-slide.remark-slide-content:before,
.title-slide.remark-slide-content:after {
  position: absolute;
  top: 20px;
  height: 60px;
}

/* 单独设置左上角Logo的位置和内容 */
.title-slide.remark-slide-content:before {
  left: 20px;
  content: url(logo-left.svg);
}

/* 单独设置右上角Logo的位置和内容 */
.title-slide.remark-slide-content:after {
  right: 20px;
  content: url(logo-right.svg);
}

注意事项 #

• 确保Logo文件的路径正确：如果是相对路径，要和CSS文件的位置对应，或者用绝对路径（比如/assets/logo-left.svg）。
• 调整间距和尺寸：根据你的幻灯片布局，修改top、left、right和height的值，让Logo位置更贴合需求；如果需要保持Logo的宽高比例，可以用max-height替代height，避免拉伸变形。
• 兼容性：remark基于浏览器渲染，这种伪元素的方式在现代浏览器中都能完美支持，不用担心兼容性问题。

这种方案的优势在于完全用CSS实现，不需要修改remark的幻灯片结构，保持了内容和样式的分离，后续调整Logo位置或替换文件也只需要修改CSS，非常方便。

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