通过跨度创建点不是从css中的反应生成的答案

【问题标题】：create dot by span is not generated from react in css通过跨度创建点不是从css中的反应生成的
【发布时间】：2021-08-08 03:12:34
【问题描述】：

我想创建一个包含两个元素之间的点的组件。我拥有的代码如下所示，但是，我尝试使用 span 元素然后创建 css 以便我可以在 2 个跨度之间显示 .。但反应不会在 2 个跨度之间生成点。我还尝试使用div，然后确实显示了点，但 2 元素的格式未在中心对齐

//html
import "./styles.css";

export default function App() {
  return (
    <div className="panel-section">
      <div className="panel-header">
        <div className="panel-title">
          {/** use div format is not correct */}
          <div>May 1st 5:31PM</div>
          <div className="panel-dot"></div>
          <div>Google</div>
          {/** dot is not generated
          <span>May 1st 5:31PM</span>
          <span className="panel-dot"></span>
          <span>Google</span>
          */}
        </div>
      </div>
    </div>
  );
}


//css
.panel {
  width: 600px;
  height: 500px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  left: 0.5%;
  right: 33.44%;
}

.panel-title {
  padding: 8px;
  color: #ffffff;
  background-color: #3aac6f;
}

.panel-dot {
  width: 4px;
  height: 4px;
  background: #3aac6f;
  align-self: center;
}

codepen:

【问题讨论】：

您是否收到任何错误消息？

标签： javascript html css reactjs flexbox

【解决方案1】：

你可以试试这个：

App.js

import React from 'react';
import './style.css';

export default function App() {
  return (
    <div className="panel-section">
      <div className="panel-header">
        <div className="panel-title">
          <span>May 1st 5:31PM</span>
          <span>Google</span>
        </div>
      </div>
    </div>
  );
}

style.css

.panel-title span:first-of-type::after {
  content: '.';
}

演示：Stackblitz

或

App.js

import React from 'react';
import './style.css';

export default function App() {
  return (
    <div className="panel-section">
      <div className="panel-header">
        <div className="panel-title">
          <span>May 1st 5:31PM</span>
          <span>{"."}</span>
          <span>Google</span>
        </div>
      </div>
    </div>
  );
}

【讨论】：